Can you explain how useState works internally?

React’s hooks, including useState, rely on some internal machinery that keeps track of state per component and per hook call during rendering. Here's a simplified explanation of the internal mechanics:

1. Hook List / Linked List

• React maintains a linked list or array of "hook states" for each component.
• When a component renders, React keeps track of which hook it is currently processing via a cursor/index.
• Each call to useState() corresponds to one "slot" in this list.

2. State Storage

• Each slot stores:
• The current state value.
• A queue of pending state updates.

3. Initial Render

• When the component first renders, React:
• Creates a new slot for useState with the initial state (e.g., 0).
• Returns [state, updaterFunction].

4. Updater Function

• The updater function (setCount) is a closure that, when called:
• Enqueues a state update to React's internal queue.
• Schedules a re-render of the component.

5. Re-render and State Update

• On the next render:
• React processes all queued updates for each hook slot.
• Updates the stored state value accordingly.
• Returns the new state to the component.

6. Important: Hook Order

• Hooks must be called in the same order on every render so React can match hook calls to their internal slots.
• That’s why you can’t call hooks conditionally.

The pseudocode for internal implementation of useState looks like below,

 let hookIndex = 0;
 const hooks = [];
 
 function useState(initialValue) {
     const currentIndex = hookIndex;
 
     if (!hooks[currentIndex]) {
         // First render: initialize state
         hooks[currentIndex] = {
             state: initialValue,
             queue: [],
         };
     }
 
     const hook = hooks[currentIndex];
 
     // Process queued updates
     hook.queue.forEach(update => {
         hook.state = update(hook.state);
     });
     hook.queue = [];
 
     // Define updater function
     function setState(action) {
         // action can be new state or function(state) => new state
         hook.queue.push(typeof action === 'function' ? action : () => action);
         scheduleRender(); // triggers React re-render
     }
 
     hookIndex++;
     return [hook.state, setState];
 }