React hızla gelişmeye ve değişmeye devam ediyor. React v16.7.0-alpha versiyonunda yeni özelliği hooks’u tartışmaya açtı. React hooks bir class yazmadan react özelliklerini kullanmanıza olanak sağlayan bir yapıdır. React geliştiricilerinin hatırlayacağı üzere daha önce oluşturduğumuz class’ları react.component’ten extend ediyorduk ve bu sayede react özelliklerini kullanabiliyorduk. Şimdi buna gerek kalmadı.

Bildiğiniz üzere React class lifecyle ‘nda componentDidMountcomponentDidUpdate ve componentWillUnmount methodları yer almakta. Hooks ile birlikte bu methodların görevini useEffect üstleniyor. Ayrıca state yönetiminde ve kullanımında çok kolaylık sağlamaktadır. Bunu bir örnekle inceleyecek olursak;
Ilk önce import işlemlerimizi yapalım.

import { useState, useEffect } from 'react’;

Ardından fonksiyonumuzu oluşturalım.

function Example() {const [count, setCount] = useState(0);return (<div><p>{count} kere tıkladınız.</p><button onClick={() => setCount(count + 1)}>Tıkla</button></div>);}

Evet fonksiyonumuzu inceleyecek olursak. Const ‘da count değişkeni tanımlayarak setCount ile bunu güncelleyeceğimizi belirtiyoruz. Ayrıca useState(0) üzerinde default değere “0” atıyoruz.
Artık tasarım tarafında setCount(count + 1) ile state de bulunan count değişkenimize değer ataması yapabiliyoruz.

useEffect

Ayrıca fonksiyonumuzun içine useEffect ekleyerek component render edildikten sonra yapması gerekenleri belirtebiliriz. Her render işleminden sonra bu fonksiyonun çalıştığını unutmamalıyız.

useEffect(() => {document.title = `${count} kere tıkladınız`;});

Ayrıca effect’ler bir fonksiyonu return ederek işlemin temizlenmesini sağlar. Örnek olarak aşağıdaki kod bloğuna bakacak olursa useEffect kendi içinde cleanup() fonksiyonunu return ederek işlemi temizliyor.

import { useState, useEffect } from 'react';function FriendStatus(props) {const [isOnline, setIsOnline] = useState(null);function handleStatusChange(status) {setIsOnline(status.isOnline);}useEffect(() => {ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);// Bu kısımda nasıl temizleneceğini belirtin:return function cleanup() {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};});if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';}

Bu örnekte component unmount olduğunda abonelikten çıkılmış olacak. Sayfa her render olduğunda bu fonksiyon çalışarak abonelikten çıkılmasına engel olmak için. Sadece props.arkadas.id değiştiğinde bu işlemi yapması için kodumuzu aşağıdaki gibi revize ediyoruz.

useEffect(() => {ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);// Bu kısımda nasıl temizleneceğini belirtin:return function cleanup() {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};}, [props.arkadas.id]);

Component içinde birden fazla useEffect ve useState kullanabilirsiniz.

Faydalı olması dileğiyle…