React’ın ‘useEffect’ kancası, geliştiricilerin fonksiyonel bileşenlerde yan etkileri yürütmesine olanak tanıyan güçlü bir özelliktir. İşte nasıl çalıştığına dair kısa bir açıklama:

1. Bileşen DOM’a işlendikten sonra useEffect çağrılır.
2. Yürütmek istediğiniz yan etkileri içeren bir işlevi argüman olarak kabul eder.
3. ‘useEffect’e iletilen işlev, bir bağımlılıklar dizisi olan ikinci bir argüman alabilir. Dizi boşsa efekt yalnızca bir kez, bileşen bağlandıktan sonra çalıştırılır. Dizi boş değilse bağımlılıklardan biri her değiştiğinde efekt çalışacaktır.
4. useEffect, bileşenin bağlantısı kesilmeden veya bir sonraki efekt yürütülmeden önce çağrılan bir temizleme işlevi döndürür. Bu, efektte oluşturulan kaynakları veya zamanlayıcıları temizlemenize olanak tanır.

Özetle, ‘useEffect’ işlevsel bileşenlerdeki yan etkileri kontrollü ve verimli bir şekilde uygulamanıza olanak tanırken aynı zamanda artık ihtiyaç duyulmadığında kaynakları temizlemenin bir yolunu da sağlar.

BİR USE EFFECT ÖRNEĞİ

React bileşeninde useEffectin nasıl kullanılacağına dair bir örnek:

“`jsx
‘react’ten React, { useState, useEffect }’i içe aktarın;

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

useEffect(() => {
// Bu efekt bileşen monte edildikten sonra çalışacak
console.log(‘Bileşen monte edildi’);

 // Bileşenin bağlantısı kesilmeden önce çağrılacak temizleme işlevi
 dönüş () => {
   console.log('Bileşenin bağlantısı kesilecek');
 };

}, []);

useEffect(() => {
// Bu efekt sayım değiştiğinde her zaman çalışacaktır
console.log(Sayı değişti: ${count});

 // Bir sonraki efekt yürütülmeden önce çağrılacak temizleme işlevi
 dönüş () => {
   console.log('Efekt temizlenecek');
 };

}, [saymak]);

geri dönmek (

{count setCount(count + 1)}>Arttırma
);
}
””

Bu örnekte, biri boş bağımlılık dizisine sahip, diğeri ise bağımlılık olarak “count”a sahip iki “useEffect” kancamız var. İlk efekt, bileşen monte edildikten sonra yalnızca bir kez çalışacak ve ikinci efekt, her “count” değiştiğinde çalışacaktır. Her iki efekt de sırasıyla bileşenin bağlantısı kesilmeden önce veya bir sonraki efekt yürütülmeden önce çağrılacak bir temizleme işlevi döndürür.

Bu, yan etkileri kontrollü ve verimli bir şekilde uygulamamıza olanak tanırken aynı zamanda etkide oluşturulan kaynakları veya zamanlayıcıları da temizlememizi sağlar.