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
Prepare for at least one coding screen with no AI help beyond autocomplete. Candidates report it, and the posting lists no interview format, so confirm the rules with your recruiter. 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.
An unassisted screen is a time-boxed read on raw skill and clarity of thought, so the bar is code you can explain re-render by re-render 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.