useCounter — Custom Hook Anatomy

·Easy·React Hooks

Hook slots, update queue, render → commit · what a custom hook actually owns

Practice mode

Step

Mount

React calls Component() for the very first time. No hooks are recorded for this instance yet.

Algorithm workspace

One Instance (mount → 4 clicks)

Step 1 / 32init

100%

event

→render · mount

→commit

→idle

render #1

Hook slots · <Component />

no hooks yet

Update queue

queue empty

Screen

Counter: —

IncrementDecrementReset

slot list = this instance's state, keyed by call order · queue = updates React has not processed yet · screen = the last commit

Explanation

A component instance is nothing more than a position in the tree plus an ordered list of hook slots. The list starts empty — the first render is what fills it.

step 1 / 32

Space play← → stepHome reset

One Instance (mount → 4 clicks)

1// ── useCounter.js ─────────────────────────────
2import { useState } from 'react';
3 
4export default function useCounter(initialValue = 0) {
5  const [count, setCount] = useState(initialValue);
6 
7  return {
8    count,
9    increment: () => setCount((x) => x + 1),
10    decrement: () => setCount((x) => x - 1),
11    reset: () => setCount(initialValue),
12    setCount,
13  };
14}
15 
16// ── Component.jsx ─────────────────────────────
17export default function Component() {//render: 1slots: 0
18  const { count, increment, decrement, reset, setCount } = useCounter();
19 
20  return (
21    <div>
22      <p>Counter: {count}</p>
23      <button onClick={increment}>Increment</button>
24      <button onClick={decrement}>Decrement</button>
25      <button onClick={reset}>Reset</button>
26    </div>
27  );
28}

render1

slots0

Command Palette

useCounter — Custom Hook Anatomy