useEffect hook, React fonksiyonel bileşenlerinde yan etkileri yönetmek için kullanılır. Örneğin, bir bileşenin render edilmesi, güncellenmesi veya bileşenin kaldırılması gibi durumlar için yan etkileri kontrol etmek için kullanılabilir.
useEffect hook’u, sınıf tabanlı bileşenlerdeki (class component) yaşam döngüsü metotlarına karşılık gelir. İşlevsel bir bileşende (function component) useEffect kullanırken, sınıf tabanlı bir bileşende aşağıdaki yaşam döngüsü metotlarına karşılık gelir:
componentDidMount: İlk render işleminden hemen sonra bir kere çalışır. Bileşen oluşturulduktan sonra yan etkileri gerçekleştirmek için kullanılır.
useEffect(() => {
// componentDidMount işlemleri
}, []);componentDidUpdate: Herhangi bir güncelleme sonrasında çalışır. Bileşen güncellendikten sonra yan etkileri gerçekleştirmek için kullanılır.
useEffect(() => {
// componentDidUpdate işlemleri
});componentWillUnmount: Bileşen kaldırılmadan hemen önce çalışır. Temizleme işlemleri gibi yan etkileri gerçekleştirmek için kullanılır.
useEffect(() => {
return () => {
// componentWillUnmount işlemleri
};
}, []);- İsteğe bağlı olarak,
componentDidMountvecomponentDidUpdateiçin birleştirilmiş bir kullanım da mümkündür. Bu durumda,useEffectiçerisinde ikinci bir parametre olarak değişen bir değişkenin kullanılması gerekir.
useEffect(() => {
// componentDidMount ve componentDidUpdate işlemleri
}, [dependencies]);Bu şekilde, useEffect hook’u, sınıf tabanlı bileşenlerdeki yaşam döngüsü metotlarının işlevselliğini sağlar.
useEffect hook’unun temel kullanımı:
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
// State tanımlamak
const [count, setCount] = useState(0);
// useEffect hook'u kullanarak yan etkileri yönetme
useEffect(() => {
// Component ilk render edildiğinde ve count state'i değiştiğinde çalışır
document.title = `You clicked ${count} times`;
// cleanup fonksiyonu, bileşenin kaldırılması öncesinde çalışır
return () => {
document.title = 'React App'; // Örnek temizleme işlemi
};
}, [count]); // count state'i değiştiğinde yeniden çalıştır
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default ExampleComponent;Yukarıdaki örnekte, useEffect hook’u, bileşen her render edildiğinde ve count state’i her değiştiğinde çalışır. useEffect içindeki fonksiyon, sayfa başlığını güncellemek için kullanılır. Ayrıca, useEffect içindeki bir temizleme fonksiyonu, bileşenin kaldırılması öncesinde çalışır ve etkisiz hale getirilmiş durumdaki işlemleri gerçekleştirir. Bu örnekte, temizleme fonksiyonu, sayfa başlığını başlangıç durumuna geri getirir.
useEffect‘in ikinci parametresi olan dizi, hangi state ya da props değişkenlerinin değiştiğinde useEffect‘in tekrar çalışacağını belirtir. Bu dizi, useEffect içindeki fonksiyonun tekrar çalışmasını tetikleyen bağımlılıkları sağlar. Eğer bu dizi boş bırakılırsa, useEffect her bileşen yeniden render edildiğinde çalışır. Bu, özellikle komponentin ilk render edildiği zaman gibi durumlarda işe yarar.
Bu örnek, bir sayfa başlığını güncellemek için kullanılırken, gerçek uygulamalarda daha karmaşık işlemler yapılabilir. Örneğin, veritabanı çağrıları yapmak, API istekleri göndermek veya abonelikleri yönetmek gibi işlemler de useEffect içinde gerçekleştirilebilir.
API İstekleri Yapma
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function DataFetchingComponent() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => {
setData(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}, []); // Boş dizi, sadece bileşen ilk render edildiğinde çalışmasını sağlar
return (
<div>
<h2>Data:</h2>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default DataFetchingComponent;
Tarayıcı Eventlerini Kullanma
import React, { useEffect } from 'react';
function WindowResizeComponent() {
useEffect(() => {
const handleResize = () => {
console.log('Window resized!');
};
window.addEventListener('resize', handleResize);
// Cleanup
return () => {
window.removeEventListener('resize', handleResize);
};
}, []); // Boş dizi, sadece bileşen ilk render edildiğinde çalışmasını sağlar
return (
<div>
<h2>Window Resize Listener</h2>
</div>
);
}
export default WindowResizeComponent;
Özel Abonelikler Oluşturma
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
function RealTimeDataComponent() {
const [realTimeData, setRealTimeData] = useState(null);
useEffect(() => {
const socket = io('https://api.example.com');
socket.on('realTimeUpdate', newData => {
setRealTimeData(newData);
});
// Cleanup
return () => {
socket.disconnect();
};
}, []); // Boş dizi, sadece bileşen ilk render edildiğinde çalışmasını sağlar
return (
<div>
<h2>Real Time Data:</h2>
{realTimeData && <p>{realTimeData}</p>}
</div>
);
}
export default RealTimeDataComponent;
Bu örnekler, useEffect hook’unun farklı senaryolarda nasıl kullanılabileceğini göstermektedir. API istekleri yapma, tarayıcı olaylarını dinleme veya özel abonelikler oluşturma gibi çeşitli işlemler useEffect içinde gerçekleştirilebilir.
