Three broken React components — each missing a single hook. Drag the right hook from the tray into the dotted slot and the live preview fixes itself. Decoys are real hooks, so read carefully.
tip — keyboard works too: tab to a hook, space to pick up, tab to a slot, space to drop.
Click the button → the count should go up. It doesn't. What's missing?
function Counter() {const [count, setCount] = _____(0);return (<button onClick={() => setCount(c => c + 1)}>Clicked {count} times</button>);}
The clock shows the current time… and never moves. Add the hook that runs a side-effect after render.
function Clock() {const [time, setTime] = useState(() => new Date().toLocaleTimeString());_____(() => {const id = setInterval(() => setTime(new Date().toLocaleTimeString()),1000);return () => clearInterval(id);}, []);return <div>{time}</div>;}
Click the button → it should focus the input. Add the hook that holds a stable reference to a DOM node across renders.
function FocusButton() {const inputRef = _____(null);return (<><input ref={inputRef} /><button onClick={() => inputRef.current?.focus()}>Focus the input</button></>);}