useEffect Hook

Side Effects Management

💡 useEffect, EK, "REMINDER SYSTEM" hai — "JAB, BHI, YE, CHEEZ, CHANGE, HO, MUJHE, YE, KAAM, KARNA, HAI" (jaise, DATA FETCH KARNA, SUBSCRIPTION SETUP KARNA). CLEANUP FUNCTION, "REMINDER, CANCEL, KARNE, KA" WAY hai, JAB, WOH, AB, ZAROORI, NAHI.

useEffect, "SIDE EFFECTS" (jaise, API CALLS, SUBSCRIPTIONS, DOM MANIPULATION) ko, RENDER LOGIC SE, SEPARATE, RAKHTA hai — RENDER, KE, BAAD, RUN, HOTA, hai. SECOND, ARGUMENT (DEPENDENCY ARRAY), CONTROL, KARTA, hai, KAB, EFFECT, RE-RUN, HOGA.

Empty, DEPENDENCY ARRAY ([]), MATLAB, EFFECT, SIRF, EK, BAAR, (MOUNT PAR) RUN, HOGA. NO, DEPENDENCY, ARRAY, MATLAB, HAR, RENDER, PAR, RUN, HOGA. RETURN, KIYA, GAYA, FUNCTION (CLEANUP), COMPONENT, UNMOUNT, HONE, PAR, YA, NEXT, EFFECT, RUN, HONE, SE, PEHLE, CALL, HOTA, hai.

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    fetch("/api/users/" + userId)
      .then(res => res.json())
      .then(data => { if (!cancelled) setUser(data); });

    return () => { cancelled = true; };   // CLEANUP — race conditions AVOID
  }, [userId]);   // userId change hone par, RE-RUN

  return user ? <h2>{user.name}</h2> : <p>Loading...</p>;
}

⏱️

useEffect, EK, "REMINDER SYSTEM" hai — "JAB, BHI, YE, CHEEZ, CHANGE, HO, MUJHE, YE, KAAM, KARNA, HAI" (jaise, DATA FETCH KARNA, SUBSCRIPTION SETUP KARNA). CLEANUP FUNCTION, "REMINDER, CANCEL, KARNE, KA" WAY hai, JAB, WOH, AB, ZAROORI, NAHI.

1 / 2

⚡ Quick Recap

useEffect = render ke baad, side effects RUN karta hai
Empty [] = mount PAR, SIRF, EK BAAR. No array = HAR render PAR
Cleanup function (return), UNMOUNT/RE-RUN se, PEHLE, CALL hota hai

On this page (2 subtopics)

EK, COMPONENT, MEIN, MULTIPLE, useEffect, CALLS, HO, SAKTE, HAIN, HAR, EK, APNI, ALAG, RESPONSIBILITY, KE, SAATH — jaise, EK, DATA, FETCH, KE, LIYE, EK, SUBSCRIPTION, SETUP, KE, LIYE — "SEPARATION, OF, CONCERNS" BEHTAR, MAINTAINABILITY, DETA, hai.

💡Tip: EK, HI, BADE, useEffect, MEIN, SAB, KUCH, DAALNA, (MULTIPLE, UNRELATED, SIDE, EFFECTS), MUSHKIL, HOTA, hai, MAINTAIN, KARNA — ALAG, EFFECTS, KO, ALAG, useEffect, CALLS, MEIN, RAKHO.

useLayoutEffect, SYNCHRONOUSLY, DOM, MUTATIONS, KE, TURANT, BAAD, RUN, HOTA, hai, BROWSER, PAINT, SE, PEHLE — useEffect, PAINT, KE, BAAD, ASYNCHRONOUSLY, RUN, HOTA, hai. DOM, MEASUREMENTS, (jaise, ELEMENT, KI, HEIGHT, READ, KARNA) KE, LIYE, useLayoutEffect, USE, HOTA, hai, "FLICKER" AVOID, KARNE, KE, LIYE.

useEffect = paint, ke, baad, ASYNC — MOST, common, use-cases
useLayoutEffect = paint, se, pehle, SYNC — DOM, measurements, ke, liye

← Previous🔢 useState Hook Next →🌐 useContext Hook

Code10x

useEffect Hook

Multiple useEffect Calls in One Component

useLayoutEffect vs useEffect