React Hooks Nedir?

Published in

Bilişim Hareketi

2 min readJan 12, 2019

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 componentDidMount, componentDidUpdate 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.

useContext

Componentler arsındaki state geçişleri uygulama büyüdükçe daha da karmaşıklaşmaktadır. Component ağacında birbirine uzak componentler arasında veri taşımak için sade ve güzel bir çözümdür.

Global state management olarak düşünmekte fayda var. Kullanımı kolaydır, aşağıdaki örneği inceleyebilirsiniz.

const customer = useContext(CustomerContext)

Faydalı olması dileğiyle…

React Hooks Nedir?

Written by Abdulkerim Karaman