Doston, jab hum ReactJS me kaam karte hain, toh useEffect hook humara sabse bada saathi hota hai. Lekin aksar naye developers yahan galti kar dete hain—kabhi infinite loop me phas jaate hain, toh kabhi data update nahi hota. Aaj hum useEffect dependency array ke concept ko aise samjhenge ki aapko dobara isme kabhi koi error nahi aayega.
useEffect dependency array kya hai aur ye kaise kaam karta hai?
Simple shabdon me kahein toh, dependency array useEffect ko ek "condition" deta hai. Ye batata hai ki "Bhai, jab tak ye variable na badle, tab tak dobara apna kaam mat karna."
useEffect dependency array ke 3 main scenarios
Chaliye isse code ke zariye samajhte hain. Dhyan dijiye ki hum kab kya use kar rahe hain:
1. Empty Dependency Array []
Jab aap array ko khaali chhod dete hain, toh useEffect sirf ek baar chalta hai—jab component pehli baar screen par load (mount) hota hai.
useEffect(() => {
console.log("Main sirf ek baar chalunga!");
}, []); // Empty array2. Dependency Array with Values [data]
Jab aap array me koi variable daalte hain, toh React har render ke baad check karta hai: "Kya 'data' ki value pehle se alag hai?" Agar haan, toh effect fir se chalega.
useEffect(() => {
console.log("Data badal gaya hai:", data);
}, [data]); // Jab data change hoga, tabhi chalega3. No Dependency Array
Agar aap array hi nahi dete, toh ye har re-render par chalega, jo ki aksar performance ke liye kharab hota hai.
Comparison Table: Dependency Arrays
| Dependency Array | Execution Timing |
|---|---|
| No Array | Every render |
| Empty Array [] | Only on mount |
| With variables [prop, state] | On mount + when listed values change |
useEffect me common mistakes aur unhe kaise fix karein
Bahut se developers useEffect ke andar error face karte hain kyunki wo dependencies bhool jaate hain. React ka official documentation suggest karta hai ki humein har us variable ko dependencies me zaroor daalna chahiye jo effect ke andar use ho raha hai.
Infinite Loop se kaise bachein?
Agar aap useEffect ke andar hi setState call kar rahe hain aur usi state ko dependency array me daal diya, toh wo infinite loop ban jayega. Isse bachne ke liye logic ko clean rakhein aur functional updates ka use karein.
// Bad Practice: Infinite loop
useEffect(() => {
setCount(count + 1);
}, [count]);
// Good Practice: Functional update
useEffect(() => {
setCount(prev => prev + 1);
}, []); // No dependency neededBest Practices for React Performance
- Cleanup Function: Hamesha return statement ka use karein agar aap API calls ya event listeners handle kar rahe hain.
- Keep it simple: Ek useEffect me ek hi responsibility rakhein.
- Dependency Order: Hamesha dependencies ko clearly mention karein taki debugging aasaan ho.
Frequently Asked Questions (FAQs)
Toh doston, humne aaj seekha ki useEffect dependency array sirf ek feature nahi, balki React performance control karne ka ek tool hai. Ise sahi se samajhne ke baad aapka code aur bhi clean aur fast ban jayega. Happy coding!
टिप्पणियाँ
एक टिप्पणी भेजें