React.Js useEffect() Kullanımı

React.Js useEffect() Kullanımı

useEffect()

useEffect React'ta bir yan etki (side-effect) yönetimi hook'u olarak kullanılır. Bu hook, bir bileşenin render döngüsü dışında kod çalıştırmamıza olanak tanır. useEffect genellikle veri çekme, abonelikler oluşturma, manuel DOM manipülasyonları gibi işlemler için kullanılır.

Kullanımı

useEffect'in temel sözdizimi şu şekildedir:

useEffect(() => {
// Yan etki kodu burada yer alır
return () => {
// Temizleme kodu (opsiyonel)
};
}, [dependency1, dependency2]); // Bağımlılık dizisi

• İlk parametre olarak bir fonksiyon alır. Bu fonksiyon içerisinde yan etkiyi gerçekleştirebiliriz.
• İkinci parametre olarak bir bağımlılık dizisi alır. Bu dizi değiştiğinde yan etki tekrar çalışır.
• İlk parametre olarak verilen fonksiyon, bir temizleme fonksiyonu döndürebilir. Bu temizleme fonksiyonu, bileşenin unmount edilmesi veya bağımlılıkların değişmesi durumunda çalışır.

Örnekler

Veri Çekme

import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // Bağımlılık dizisi boş, yani sadece ilk render'da çalışır
return (
<div>
{/* data ile ilgili işlemler */}
</div>
);
}

Abonelik Oluşturma ve Temizleme

import React, { useState, useEffect } from 'react';
function App() {
const [size, setSize] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => {
setSize(window.innerWidth);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []); // Bağımlılık dizisi boş, yani sadece ilk render'da çalışır
return (
<div>
{size}
</div>
);
}

Dikkat Edilmesi Gerekenler

• useEffect yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• Bağımlılık dizisini dikkatli bir şekilde belirlemek önemlidir. Eksik veya fazla bağımlılık, beklenmeyen davranışlara yol açabilir.
• Temizleme fonksiyonu, yan etkinin oluşturduğu kaynakları serbest bırakmak için önemlidir. Örneğin, bir event listener eklediyseniz, bileşen unmount edilirken bu listener'ı kaldırmalısınız.
• useEffect hook'u, yan etkileri yönetmek için oldukça esnek ve güçlüdür. Ancak, karmaşık durum ve yan etki yönetimi için daha gelişmiş hook'lar veya kütüphaneler (örneğin, useReducer, Redux Saga, Thunk) da kullanılabilir.