useEffect İle React State Değişiklikleri Nasıl Yakalınır?

Eğer React ile çalışıyorsanız, state kullanmanız için bir çok sebep vardır. Ve state üzerinde çalışıyorsanız, state değişikliklerinde yapmak isteyeceğiniz işler vardır.

React JS useEffect Nedir?

React komponenti ilk oluşturulduğunda, hayat döngüsü sona erdiğinde veya state üzerinde bir değişiklik olduğuna isteğe bağlı diğer işlemlerin yapılmasını sağlayan bir hooktur.

Bizim için bu bölümde state üzerindeki değişiklikler sonrası yapılacak işlemler (side effect) için nasıl kullanıldığı önemlidir.

React State Üzerinde Değişken Tanımlamak

React kullanırken state üzerinde bir değişken tanımlamak oldukça kolaydır. Bunun için useState hookunu kullanmak yeterli olacaktır. Kullanım şekli

const [ degisken, setDegisken] = useState(ilkDeger);

Burada degisken oluşturmak istediğimiz değişkene verilen isimdir, setDegisken bu değişkenin değerini değiştirmek için kullanacağımız fonksiyondur. State üzerindeki bir değişkeni doğrudan değiştiremeyiz. ilkDeger ise eğer değişken oluşturulurken ona ön tanımlı bir değer (defaul value) vermek istersek o değerdir. İstenirse kullanılmayabilir.

React State Değişikliğini Yakalamak

Eğer state üzerinde bir değişken tanımladıysak ve bu değişken değiştiği zaman bir işlem yapacaksak bu durumda useEffecti kullanıyoruz. Bunun için değer değişikliklerini yakalamak istediğimiz state üzerindeki değişkenin / değişkenlerin adlarını parametere olarak bu fonksiyona veriyoruz.

useEffect(() => {
    // Yapılacak işlemler
    ...
}, [takipEdilecekDegisken1, takipEdilecekDegisken2, ...]);

Burada takipEdilecekDegiskenler bir parantez içerisinde tek tek aralarında virgül olarak yazılmalıdır.

State Değişikliğini Yakalam Örneği

Şimdi bir skore değişkenimizin olduğunu, ve skore değişkenin değeri değiştikçe bu değeri konsola yazdırmak istediğimizi varsayalım.

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

function App() {
    // State üzerinde score değişkenini tanımlayalım.
    const [score, setScore] = useState(0);

    // useEffecti oluşturalım.
    useEffect(() => {
        // score değişkenini konsola yazdıralım.
        console.log(score);
    }, [score]);

    // score değişkenini değiştirecek fonksiyonu yazalım
    const handleClick = (e) => {
        e.preventDefault();
        setScore(score + 1);
    }

    return (
        <div>
            <button onClick={handleClick}>Skoru Artır</button>
        </div>
    );
}

export default App;

Uygulamamızda bulunan butona tıkladığımızda, handleClick fonksiyonu çalışacaktır. handleClick fonksiyonu çalıştığında setScore(score + 1) ile score değişkeninin değerini 1 artırıyoruz.

score değişkeninin değeri değiştiğinde, bu değişken useEffecte takip edilecek değişken parametresi olarak girildiğinden, useEffect çalışacak ve konsola score değerini yazdıracaktır.

Böylece state üzerindeki değişikliği yakalamış ve onun ile işlem yapmış olduk.

useEffect Kullanırken Dikkat Edilmesi Gereken Şeyler

useEffect kullanırken bazı şeylere dikkat etmek gerekir.

Sadece fonksiyon komponentlerde kullanılır.
Bir döngü içerisinde kullanılmaz.
return ifadesi içerisinde kullanılmaz.
Fonksiyonun en üst bölümünde kullanılır.
Tüm return ifadelerinden önce kullanılmalıdır.

Sonuç

React state üzerindeki değişkenlerdeki değer değişikliklerini yakalamak için useEffect hookunu kullanıyoruz. Böylece state üzerinde bir değişiklik olduğunda bu değişikliğe göre işlem yapabiliyoruz.

Soru ve eklemek istediklerinizi bizimle yorumlardan paylaşabilirsiniz.

useEffect İle React State Değişikliklerini Yakalamak