React useEffect Cleanup Function Kaise Kaam Karta Hai

#react #webdev #javascript #programming

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.

⚡ Quick Answer: React useEffect cleanup function ek optional function hai jo useEffect hook ke andar return kiya jata hai. Iska kaam component ke unmount hone par ya re-render se pehle side-effects (jaise timers, subscriptions) ko clear karna hota hai taaki memory leak na ho aur application ki performance maintain rahe.

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

Component Render
→
useEffect Runs
→
Cleanup Function

Diagram: useEffect ka lifecycle sequence (Mount -> Effect -> Cleanup)

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:

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

Comparison: Without Cleanup vs With Cleanup

Scenario	Without Cleanup	With Cleanup
Memory Usage	High (Unnecessary processes)	Optimized
Performance	Slows down the app	Smooth
Bug Risk	High (State update on unmounted component)	Zero

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.

Frequently Asked Questions (FAQs)

Q1: Kya cleanup function har render pe chalta hai?
Cleanup function tab chalta hai jab effect dobara run hone wala ho (dependency change hone par) ya component unmount ho raha ho. Ye sirf component ke pehle mount par nahi chalta.
Q2: Kya main useEffect me cleanup function return na karun toh kya hoga?
Kuch nahi hoga agar aapka effect koi memory intensive kaam nahi kar raha. Lekin agar aap timers ya event listeners use kar rahe hain, toh memory leak hone ka khatra rahega.
Q3: Component unmount hone par cleanup function kaise trigger hota hai?
React internal lifecycles ko track karta hai. Jaise hi component tree se hat-ta hai, React component ke unmounting phase me cleanup function ko execute kar deta hai.
Q4: Kya cleanup function async ho sakta hai?
Nahi, cleanup function ko synchronous hona chahiye kyunki use immediately execute hona hota hai.
Q5: Cleanup function best practices kya hain?
Hamesha resources ko 'clean' karein, dependencies ko array me include karein aur memory leak se bachne ke liye har subscription ko unsubscribe zaroor karein.

DEV Community