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];
}