useEffect का उपयोग करके अपने कंपोनेंट को बाहरी दुनिया के साथ सिंक्रनाइज़ करें, डिपेंडेंसी और क्लीनअप में महारत हासिल करें।
इस पाठ को Kodokon में खोलेंएक React कंपोनेंट props और state से JSX की गणना करता है। उस दायरे के बाहर की कोई भी चीज़ - डॉक्यूमेंट का शीर्षक बदलना, एक टाइमर शुरू करना, किसी ब्राउज़र इवेंट की सदस्यता लेना - एक साइड इफ़ेक्ट है। useEffect उस कोड को रेंडरिंग के बाद चलाता है, प्रदर्शन को अवरुद्ध किए बिना, और कुछ मान बदलने पर उसे फिर से सिंक्रनाइज़ करता है।
import { useEffect } from "react";
function CartTitle({ count }) {
useEffect(() => {
document.title = `Cart (${count})`;
}, [count]);
return <p>Items: {count}</p>;
}डिपेंडेंसी ऐरे नियंत्रित करती है कि इफ़ेक्ट कितनी बार चलता है। [count]: हर उस render के बाद इफ़ेक्ट दोबारा चलता है जहाँ count बदली। []: इफ़ेक्ट केवल एक बार चलता है, पहले render के बाद। कोई ऐरे नहीं: इफ़ेक्ट हर render के बाद दोबारा चलता है, जो शायद ही कभी आप चाहते हैं। सुनहरा नियम: इफ़ेक्ट के भीतर उपयोग किया गया हर कंपोनेंट मान ऐरे में दिखना चाहिए।
import { useEffect, useState } from "react";
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setSeconds((s) => s + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <p>Elapsed: {seconds} s</p>;
}इफ़ेक्ट द्वारा लौटाया गया फ़ंक्शन क्लीनअप फ़ंक्शन है। React इसे इफ़ेक्ट के हर नए रन से पहले कॉल करता है, फिर एक आख़िरी बार जब कंपोनेंट अनमाउंट होता है। यही रिसाव को रोकता है: अनाथ टाइमर, ढेर हुए लिसनर, कभी रद्द न होने वाली सदस्यताएँ। हर इफ़ेक्ट जो कुछ “खोलता” है, उसे फिर से बंद करना होगा।
useEffect(() => {
function onResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, []);useEffect(fn, []) के साथ, फ़ंक्शन fn कब निष्पादित होता है?userId पढ़ता है पर उसकी डिपेंडेंसी ऐरे [] है। समस्या क्या है?