In this lesson, I do a fun little exercise that surprises a lot of people the first time they hear it: useState is actually built on top of useReducer. So I recreate useState using only useReducer, and by the end you’ll clearly see how the two hooks are connected. I start by scaffolding a simple CustomCounter component, then I step back and list what useState really gives us: a state value, a setter function, and a re-render when the setter is called. From there, I build a custom hook (useStateCustom) that accepts an initial value, defines a reducer that simply replaces state with the “action”, and uses useReducer to get back state and dispatch. Since useState doesn’t expose dispatch, I wrap it in a setState function to keep the mental model consistent—“setting state” rather than “dispatching actions”. Then I extend the implementation to support functional updates (passing an updater function to the setter) by moving the logic into the reducer to avoid stale state. Finally, I add lazy initialization using the third argument to useReducer, and demonstrate an “expensive computation” that runs only once (with the usual Strict Mode double-log caveat). The big takeaway: useReducer is the more fundamental hook, and useState is a convenient specialization for the common “replace state” use case.