React useEffect Dependency Array Complete Guide

React useEffect dependency array kya hai aur ise sahi tarike se kaise use karein? Is complete Hindi guide me best practices aur examples seekhein.

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.

⚡ Quick Answer: React useEffect dependency array ka kaam ye decide karna hai ki effect kab chalega. Agar array empty [] hai, toh ye sirf component mount hone par chalega. Agar usme dependencies (jaise state ya props) daal di, toh ye unke change hone par trigger hoga. Agar array hi omit kar diya, toh ye har render par chalega.

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 Lifecycle Flow

Mounting
→
Effect Triggered
→
Cleanup Function

Diagram: useEffect ka execution cycle jab state ya props update hote hain.

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 array

2. 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 chalega

3. 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

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 needed

Best 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)

Q1: Agar main dependency array me object ya array pass karun toh kya hoga?
React 'referential equality' check karta hai. Agar aap object har render me naya create kar rahe hain, toh effect baar-baar chalega. Iske liye useMemo ya useCallback ka use karein.
Q2: Kya useEffect me async function likh sakte hain?
Directly nahi. useEffect ko async nahi bana sakte. Aapko function ke andar ek async function define karke use call karna hoga.
Q3: Cleanup function kab call hota hai?
Jab component unmount hota hai ya jab dependency badalne se pehle naya effect chalne wala hota hai.
Q4: Kya main bina useEffect ke data fetch kar sakta hoon?
Haan, aajkal TanStack Query (React Query) ka use zyada recommended hai kyunki wo caching aur state management ko behtar handle karta hai.
Q5: Dependency array omit karne ka kya nuksan hai?
Isse component ka performance slow ho sakta hai kyunki wo har bar unnecessary calculations karega aur infinite re-renders ka khatra badh jayega.

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!