Tepki useEffectKancaları
useEffectKanca, bileşenlerinizde yan etkiler gerçekleştirmenize olanak tanır .
Yan etkilerin bazı örnekleri şunlardır: veri alma, doğrudan DOM'yi güncelleme ve zamanlayıcılar.
useEffectiki argümanı kabul eder. İkinci argüman isteğe bağlıdır.
useEffect(<function>, <dependency>)
Örnek olarak bir zamanlayıcı kullanalım.
Örnek:
setTimeout()İlk oluşturmadan sonra 1 saniye saymak için kullanın :
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
});
return <h1>I've rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById('root'));
Fakat bekle!! Sadece bir kez sayması gerekse bile saymaya devam ediyorum!
useEffecther render üzerinde çalışır. Bu, sayı değiştiğinde, başka bir efekti tetikleyen bir işleme gerçekleştiği anlamına gelir.
İstediğimiz bu değil. Yan etkilerin ne zaman çalıştığını kontrol etmenin birkaç yolu vardır.
Her zaman bir diziyi kabul eden ikinci parametreyi eklemeliyiz. useEffectBu dizide isteğe bağlı olarak bağımlılıkları aktarabiliriz .
1. Bağımlılık yapılmadı:
useEffect(() => {
//Runs on every render
});2. Boş bir dizi:
useEffect(() => {
//Runs only on the first render
}, []);3. Props veya durum değerleri:
useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [prop, state]);Bu sorunu çözmek için, bu efekti yalnızca ilk oluşturma işleminde çalıştıralım.
Örnek:
Efekti yalnızca ilk oluşturmada çalıştırın:
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
}, []); // <- add empty brackets here
return <h1>I've rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById('root'));
Örnek:
İşte useEffectbir değişkene bağımlı bir Hook örneği. Değişken countgüncellenirse efekt tekrar çalışır:
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Counter() {
const [count, setCount] = useState(0);
const [calculation, setCalculation] = useState(0);
useEffect(() => {
setCalculation(() => count * 2);
}, [count]); // <- add the count variable here
return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount((c) => c + 1)}>+</button>
<p>Calculation: {calculation}</p>
</>
);
}
ReactDOM.render(<Counter />, document.getElementById('root'));
Birden çok bağımlılık varsa, bunlar useEffectbağımlılık dizisine dahil edilmelidir.
Sertikalı olmak!
95 $ KAYIT
Efekt Temizleme
Bazı efektler, bellek sızıntılarını azaltmak için temizleme gerektirir.
Artık gerekmeyen zaman aşımları, abonelikler, olay dinleyicileri ve diğer efektler atılmalıdır.
Bunu useEffectHook'un sonuna bir dönüş fonksiyonu ekleyerek yapıyoruz.
Örnek:
useEffectKancanın sonundaki zamanlayıcıyı temizleyin:
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
let timer = setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
return () => clearTimeout(timer)
}, []);
return <h1>I've rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById("root"));
Not: Zamanlayıcıyı temizlemek için ona bir isim vermemiz gerekiyordu.