1 min lesson
React fundamentals under the no-AI lens
Show why this lesson detail matters: "For a Design Engineer that means writing React the way a senior teammate would on a whiteboard."
Step 1 of 2
Cursor's coding screens let you keep autocomplete and nothing else. For a Design Engineer that means writing React the way a senior teammate would on a whiteboard: from muscle memory, narrating why each hook is the right one.
The company sells the very tool you are not allowed to use here. That is deliberate. The screen is a time-boxed read on raw skill and clarity of thought, so the bar is not just working code but code where you can explain every re-render out loud while you type.
Start with the hooks, because misusing them is the fastest way to look like someone who has only ever generated React. Each hook has a job and a failure mode.
Learn more
Advanced table
Knowing the wrong use of each is what separates fluency from recall
- Hook
useState- Use it for
- Local UI state that drives the view
- When it's the wrong tool
- Derived values you can compute from props or other state - store the source, derive the rest
- Hook
useEffect- Use it for
- Syncing to something outside React: DOM, subscriptions, network
- When it's the wrong tool
- Transforming data for render or reacting to a prop change you could handle inline
- Hook
useMemo- Use it for
- Caching an expensive computation across renders
- When it's the wrong tool
- Cheap math or as a correctness crutch - it is a perf hint, not a guarantee
- Hook
useRef- Use it for
- A mutable box that survives renders without causing one: DOM nodes, timers, latest-value
- When it's the wrong tool
- State the UI should react to - refs do not trigger renders
- Hook
useCallback- Use it for
- Stabilizing a function identity passed to a memoized child or an effect dep
- When it's the wrong tool
- Every handler by reflex - wrapping a function used once adds noise and no benefit
| Hook | Use it for | When it's the wrong tool |
|---|---|---|
useState | Local UI state that drives the view | Derived values you can compute from props or other state - store the source, derive the rest |
useEffect | Syncing to something outside React: DOM, subscriptions, network | Transforming data for render or reacting to a prop change you could handle inline |
useMemo | Caching an expensive computation across renders | Cheap math or as a correctness crutch - it is a perf hint, not a guarantee |
useRef | A mutable box that survives renders without causing one: DOM nodes, timers, latest-value | State the UI should react to - refs do not trigger renders |
useCallback | Stabilizing a function identity passed to a memoized child or an effect dep | Every handler by reflex - wrapping a function used once adds noise and no benefit |
Knowing the wrong use of each is what separates fluency from recall.