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.
xxxxxxxxxx
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.
xxxxxxxxxx
useEffect(() => {
return () => {
// componentWillUnmount işlemleri
};
}, []);
- İsteğe bağlı olarak,
componentDidMount
vecomponentDidUpdate
için birleştirilmiş bir kullanım da mümkündür. Bu durumda,useEffect
içerisinde ikinci bir parametre olarak değişen bir değişkenin kullanılması gerekir.
xxxxxxxxxx
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ı:
xxxxxxxxxx
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
xxxxxxxxxx
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
xxxxxxxxxx
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
xxxxxxxxxx
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.