React Hooks

Hook’lar React 16.8’deki yeni bir eklentidir. Bir sınıf yazmadan state ve diğer React özelliklerini kullanmanıza olanak sağlarlar.

Hook Nedir?

Hook’lar React state ve yaşam döngüsü özelliklerine fonksiyonel bileşenleri kullanarak “bağlamanıza” yarayan fonksiyonlardır.

Hook’lar class’ların içerisinde çalışmazlar — React’ı class’lar olmadan kullanmanıza yararlar.

• React, önceden sadece class bileşenleri üzerinde state ve yaşam döngüsü yönetimi sağlıyordu. Ancak hook’lar sayesinde, fonksiyonel bileşenlerde de bu özellikleri kullanabiliriz. Bu, class bileşenleri kullanmak yerine daha basit ve okunabilir kod yazmamızı sağlar.

Hook’ların Kuralları

Hook’lar JavaScript fonksiyonlarıdır ama ek olarak iki kural koymaktadırlar:

1.Hook’ları sadece en üst seviyede çağırın: Hook çağrıları, fonksiyonel bileşenin en üst düzeyinde, doğrudan fonksiyonun içinde yapılmalıdır.

• Döngüler, koşullu ifadeler veya iç içe fonksiyonlar gibi kontrol akışı yapıları içinde hook çağırmak önerilmemektedir. Bu kural, hook’ların çalışmasını sağlamak ve React’in hook çağrılarını takip etmesini kolaylaştırmak için önemlidir.

2. Hook’ları sadece fonksiyonel React bileşenlerinde çağırın: Hook’lar, sadece fonksiyonel React bileşenlerinde kullanılmalıdır. Normal JavaScript fonksiyonları içinde hook çağrıları yapılmamalıdır.

• Bu, hook’ların React bileşeniyle ilişkilendirilmesini ve bileşenin state yönetimi, yaşam döngüsü vb. özelliklerini kullanmasını sağlar.

Bu kurallara uymak, kodun daha okunabilir, anlaşılır ve sürdürülebilir olmasını sağlar. Ayrıca, bu kuralların takip edilmesi, beklenmedik hataların önüne geçer ve React’in hook mekanizmasının doğru çalışmasını sağlar.

Temel Hook’lar 

useState

useState, React state’ini fonksiyon bileşenlerine eklemenize izin veren bir Hook’tur.

const [state, setState] = useState(initialState);

Bir state parçası ve onu güncellemek için bir fonksiyon döndürür.

İlk render aşamasında, döndürülen state parçası (state) başlangıçta girilen değerle (initialState) aynıdır.

setState fonksiyonu state parçasını güncellemek için kullanılır. Yeni bir state değeri kabul eder ve bileşenin yeniden render edilmesini işlem sırasına koyar.

setState(newState);

Sonra gelen yeniden-render aşamalarında, useState tarafından döndürülen ilk değer, güncelleme uygulandıktan sonraki en son state değerine eşittir.

Hadi şimdi bir örnek yapalım. 

Bu örnek bir sayaç render ediyor. Tuşa basıldığında değeri bir arttırıyor:

 1:  import React, { useState } from 'react';
 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

Satır 1: React’ten useState Hook’unu import ediyoruz.

Satır 4: Example bileşeninin içinde useState Hook’unu çağırarak yeni bir state değişkeni tanımlıyoruz. Bu, isimlerini bizim verdiğimiz bir çift değer döndürür.

• Değişkenimizin adı count çünkü tıklama sayısını tutuyor.
• useState’e 0 yollayarak count‘u sıfırdan başlatıyoruz.
• İkinci döndürülen değerin kendisi bir fonksiyondur. Bu, bize count‘u güncellemek için izin verir. Bu yüzden onu setCount diye isimlendirdik.

Satır 9: Kullanıcı her tıkladığında, setCount‘u yeni bir değerle çağırırız. React, Example bileşenini tekrar render edip, ona yeni count değerini atar.

useEffect

useEffect, fonksiyonel bir bileşene yan etkileri kullanabilme yetkisini ekler.

Class component yapısında kullanılan componentDidMount, componentDidUpdate ve componentWillUnmount gibi lifecycle metotların yerine functional componentlerde bu gerekliliği karşılayan yapıuseEffect hookudur.

React class’larındaki componentDidMount, componentDidUpdate, ve componentWillUnmount ile aynı işleve sahiptir fakat tek bir API içerisinde birleştirilmiştir.

• useEffect Hook’u Ne Yapar? 

useEffect hook’u, React bileşenlerinde yan etkilere (side effects) tepki vermek için kullanılan bir fonksiyondur. Yan etkiler, bileşenin render edilmesiyle ilişkili olmayan, örneğin ağ istekleri, veritabanı işlemleri, aboneliklerin ekleme/çıkarma işlemleri gibi işlemlerdir.

• Neden useEffect Hook’u Bir Bileşen İçinde Çağırılıyor?

useEffect hook’u bir bileşen içinde çağrılır, çünkü bu şekilde bileşenin render işlemi tamamlandıktan sonra yan etkilere tepki verilebilir. Bileşenin render işlemi tamamlandıktan sonra useEffect fonksiyonu çalışır ve belirli bir yan etkiyi gerçekleştirir. Bileşenin state’inde veya props’larında değişiklik olduğunda da useEffect fonksiyonu tekrar çalışır ve yan etkilere yeniden tepki verilir.

Böylece, useEffect hook’u, bileşenin render işlemi tamamlandıktan sonra yan etkilere tepki vermek için kullanılır ve bu nedenle bir bileşen içinde çağrılır.

• useEffect Hook’u her render (işlem) den sonra çağırılır mı?

Evet, useEffect hook’u her render işleminden sonra çağrılır. İlk render işlemi tamamlandıktan sonra useEffect fonksiyonu çalışır. Bileşenin state’inde veya props’larında değişiklik olduğunda da useEffect fonksiyonu tekrar çağrılır.

Ancak, useEffect fonksiyonuna ikinci bir parametre olan bağımlılık dizisi (dependency array) geçirilirse, useEffect fonksiyonu yalnızca belirtilen bağımlılıklarda değişiklik olduğunda çağrılır. Eğer bağımlılık dizisi boş ise (ya da hiçbir bağımlılık belirtilmezse), useEffect fonksiyonu sadece bileşenin ilk render işlemi sonrasında çalışır ve bileşen güncellendiğinde tekrar çağrılmaz.

Bağımlılık dizisi içinde belirli state veya prop değerlerini belirtirseniz, useEffect fonksiyonu yalnızca o değerlerdeki değişiklikler olduğunda tetiklenir. Bu, gereksiz yeniden hesaplamaların veya yan etkilerin önlenmesini sağlar ve performansı artırabilir.

Bir örnek verelim. 

Bu örnek, bir sayaç bileşeni oluşturur ve her tıklamada sayma değerini güncellerken, aynı zamanda HTML belgesinin başlığını da günceller.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

1. İlk olarak, React ve useState, useEffect gibi gerekli React öğelerini içeren modülleri import ediyoruz.
2. Example adında bir fonksiyonel bileşen tanımlıyoruz. Bu bileşen, bir sayma değeri (count) ve saymayı güncellemek için kullanılan bir fonksiyon (setCount) içeren bir state kullanır.
3. useEffect hook’u, bileşenin her render işleminden sonra çalışacak bir yan etki fonksiyonunu belirtir. Bu örnekte, her render işleminden sonra sayma değeri (count) kullanılarak belge başlığı (document.title) güncellenir.
4. useEffect hook’u, birinci parametre olarak bir fonksiyon alır. Bu fonksiyon, yan etkiyi gerçekleştirir. Burada, belge başlığı You clicked {count} times şeklinde güncellenir. count değeri, sayma değerini temsil eder ve sürekli olarak güncellenir.
5. return ifadesi içinde, bileşenin render edildiği JSX yapısı bulunur. Bu durumda, bir <div> içinde sayma değeri (count) ve bir buton bulunur.
6. Butona tıklandığında onClick olayı tetiklenir ve setCount fonksiyonu çağrılır. Bu, sayma değerini bir artırır ve bileşenin güncellenmesini tetikler.