React useEffect cleanup function kaise kaam karta hai aur ise memory leaks rokne ke liye kaise sahi tarike se use karein? Is guide me step-by-step seekhein.

Dosto, jab hum ReactJS me components ke saath kaam karte hain, toh aksar hume browser ke resources (jaise timers, subscriptions, ya event listeners) ko handle karna padta hai. Lekin kya kabhi socha hai ki jab component screen se hat jata hai, tab un resources ka kya hota hai? Yahi par 'cleanup function' ka asli jaadu shuru hota hai.

useEffect cleanup function kya hai aur yeh kyun zaroori hai?

Jab hum ek component banate hain, toh usme useEffect ka use karke hum API call karte hain ya setTimeOut chalate hain. Agar hum component ke unmount hone ke baad unhe band nahi karenge, toh wo background me chalte rahenge. Isse memory leak ho sakta hai aur aapke app ka error handle karna mushkil ho jata hai.

Cleanup function basically 'unsubscribe' ya 'clear' karne ka kaam karta hai. Ye tab chalta hai jab:

• Component DOM se hata diya jata hai (Unmounting).
• Effect dobara run hone wala hota hai (cleanup pichle effect ko clear karta hai).

useEffect cleanup function kaise kaam karta hai?

Ise code ke jariye samajhna sabse aasan hai. Chaliye ek timer ka example lete hain jahan hum interval ko cleanup nahi karenge toh kya dikkat aayegi.

import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    // Cleanup function
    return () => {
      clearInterval(interval);
      console.log("Timer cleanup ho gaya!");
    };
  }, []);

  return 
Count: {count}
;
}

Yahan return block me jo function hai, wahi cleanup function hai. Jab ye component DOM se hat jayega, React apne aap is function ko call kar dega aur interval ko stop kar dega.

Cleanup function ka use kab karein?

Ek senior developer hone ke naate, main aapko suggest karunga ki cleanup function ka use in cases me zaroor karein:

1. Event Listeners: Agar aap window.addEventListener use kar rahe hain, toh unmount par removeEventListener zaroor karein.
2. Timers: setInterval ya setTimeout ko clear karne ke liye.
3. API Abort: Agar user page se dur chala gaya, toh ongoing API requests ko cancel karne ke liye AbortController ka use karein.
4. WebSockets: Connection ko close karne ke liye.

Comparison: Without Cleanup vs With Cleanup

Common errors jo beginners karte hain

Sabse badi galti hoti hai cleanup function ko bhool jana. Agar aap useEffect ke andar kuch bhi asynchronous start kar rahe hain, toh usko stop karne ka mechanism cleanup function hi hota hai. Dusri galti hai dependencies ko sahi se set na karna. Agar dependencies change hoti hain, toh purana effect cleanup hota hai aur naya effect start hota hai.

Aur adhik jankari ke liye aap official React Documentation padh sakte hain.