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

⚡ झट से 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

इस 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

← पिछला🔢 useState Hook अगला →🌐 useContext Hook

Code10x

useEffect Hook

Multiple useEffect Calls in One Component

useLayoutEffect vs useEffect