Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Dekho React hooks ko linked list mein kaise manage karta hai aur state updates process karta hai.
Hooks fiber node par ek singly linked list ke roop mein store hote hain. Jab aapka component render hota hai, React yeh list order mein walk karta hai â har hook call (useState, useEffect, useRef, etc.) ko uski stored state se match karta hai. Isliye Hooks ke Rules exist karte hain: agar aap hooks conditionally call karte hain, list order change hoti hai aur React galat hook ke liye galat state read karta hai.
Har hook call (useState, useEffect, useRef, useMemo...) ek 'Hook' object banata hai jisme ek memoizedState field aur ek next pointer hota hai. React har ek ko call order mein list mein append karta hai. List fiber node ke memoizedState field par store hoti hai.
Ek useState hook object store karta hai: memoizedState (current value), queue (pending setState calls ki linked list), aur dispatch (setState function jo aap apne component mein use karte hain). dispatch function stable hai â yeh renders ke beech kabhi nahi badalti.
Jab aap setState(newValue) call karte hain, React immediately state update nahi karta. Uski jagah, woh hook ke queue mein ek Update object append karta hai aur fiber ka ek re-render schedule karta hai. Ek event handler mein multiple setState calls ek re-render mein batch ho jaate hain.
Next render par, React hooks list dobara walk karta hai. Har useState hook ke liye, woh saare queued updates order mein process karta hai (ya useReducer ke liye reducer function call karta hai). Final computed value naya memoizedState ban jaata hai.
Ek effect hook object store karta hai: create (woh callback jo aapne pass kiya), destroy (cleanup function jo usne pichli baar return ki), deps (dependency array), aur ek tag jo indicate karta hai ki yeh useEffect hai, useLayoutEffect hai, ya useInsertionEffect.
Hooks fiber node par ek singly linked list ke roop mein store hote hain. Call order = list order. Conditional hooks list tod dete hain.
Ek Hook object par field jo uska current value store karta hai. useState ke liye: state value. useRef ke liye: '{' current: value '}'. useMemo ke liye: cached result.
setState calls ki ek circular linked list jo next render par process hone ka wait kar rahi hai. Multiple updates ek queue flush mein batch ho jaate hain.
React render phase ke hisaab se hook implementation swap karta hai. Pehle render ke dauran: HooksDispatcherOnMount. Re-renders ke dauran: HooksDispatcherOnUpdate. Isliye hooks components ke bahar call nahi ho sakte.
Hooks sirf top level par call karein (conditionals/loops ke andar kabhi nahi) aur sirf React functions se. Yeh rules exist karte hain kyunki React hooks ko linked list mein unki position se identify karta hai.
1// Your component:2function Counter() {3 const [count, setCount] = useState(0); // Hook 14 const [name, setName] = useState('Bob'); // Hook 25 const ref = useRef(null); // Hook 367 useEffect(() => { ... }, [count]); // Hook 48}910// React's internal hooks linked list for this fiber:11Hook1 { memoizedState: 0, next: Hook2 } // count12Hook2 { memoizedState: 'Bob', next: Hook3 } // name13Hook3 { memoizedState: { current: null }, next: Hook4 } // ref14Hook4 { memoizedState: { create, destroy, deps: [0] }, next: null }1516// If you conditionally call hook 2:17// Hook1 â Hook3 â Hook4 (Hook2 slot is now useRef!)18// React reads "Bob" as the ref's current value â BUG
Hooks internals samajhna explain karta hai ki Hooks ke Rules arbitrary restrictions nahi balki technical necessities kyun hain. Yeh yeh bhi explain karta hai ki useState setter function hamesha stable kyun hai (yeh queue se attached hai, value se nahi), renders ke across hooks kyun kaam karte hain (woh fiber par persist hote hain), aur aap custom hooks kyun bana sakte hain â woh sirf functions hain jo doosre hooks call karte hain, list mein aur nodes add karte hain.
You add an early return in a component for a loading state: `if (loading) return <Spinner />`. After the data loads, React crashes with 'Rendered more hooks than during the previous render.'
The early return is ABOVE some hook calls. On the first render (loading=true), React processes 2 hooks. On the second render (loading=false), it processes 5 hooks. React's linked list has 2 slots but encounters 5 hook calls â the list is corrupted.
Move ALL hook calls above any conditional returns. The early return must come AFTER the last hook call. React hooks are a linked list indexed by call order â the call count must be identical across every render of the same component.
Takeaway: The 'Rules of Hooks' aren't arbitrary restrictions â they're a direct consequence of the linked list data structure. React identifies hooks by position (call order), not by name. Changing the number of hooks between renders corrupts the list.
You build a custom `useToggle` hook used in 3 different components. You notice that toggling in one component doesn't affect the others â but you're confused about WHY, since they share the same hook code.
Developers sometimes assume custom hooks share state like a global singleton. They expect `useToggle()` in Component A and Component B to share the same boolean value, leading to incorrect architecture decisions.
Each component has its own fiber node with its own hooks linked list. When Component A calls `useToggle()`, React creates a hook node in Component A's list. Component B gets a completely separate hook node in its own list. Custom hooks are just a code-sharing mechanism â state is always local to the calling component's fiber.
Takeaway: Custom hooks share LOGIC, not STATE. Each component instance gets its own copy of the hook's state because each fiber maintains its own hooks linked list. To share state between components, you need Context, a state manager, or lifting state up.