Reusable stateful hooks

Opening your lesson

A custom hook packages stateful behavior behind a name. Each call still gets its own state. Two counters that use the same hook must not become one counter, and resetting one caller must leave the other caller alone. This distinction lets you share a tested rule without forcing unrelated controls to move together.

You'll build a quantity hook for crates and labels. The crate count starts from a supplied value while labels start at zero. Return the current value and the operations the component needs, then render each instance separately. Exercise the controls in alternating order so an accidental reference to the wrong instance becomes visible. Later tasks move the same rule into different fictional workplaces and change the initial count.

function useQuantity(initial){const [value,setValue]=useState(initial);return {value,add:()=>setValue(v=>v+1),reset:()=>setValue(initial)}}
function App(){const crates=useQuantity(f.initial),labels=useQuantity(0);return <><h1>{f.organization}</h1><output aria-label="Crates">{crates.value}</output><output aria-label="Labels">{labels.value}</output><button onClick={crates.add}>Add crate</button><button onClick={labels.add}>Add label</button><button onClick={crates.reset}>Reset crates</button></>}

Trace the state change and its visible boundary before building the transfer tasks.

Choose your character

Your Work Gym account