React interview sprint
Three focused rows of React-specific lessons and problems.
A tighter track for a role where "frontend" means React: the hooks and patterns rounds, the component-API design round, and the perf round. Doable over a long weekend; aimed at a mid-to-senior candidate who already writes React daily.
15 items · ~5h of focused work
Hooks & patterns
- useState and State UpdatesGiving a component its own memory with useState, why state updates trigger a re-render, the functional-update form, and why React batches multiple updates together.10 min
- useEffect BasicsWhat an effect is for — synchronizing a component with something outside React — when it runs relative to rendering and painting, and why it's not just "code that runs after render."9 min
- Stale Closures and Common BugsThe general shape of the stale-closure bug beyond useEffect's dependency array — setInterval capturing an old value, listeners that never see updated state, and the two reliable fixes.9 min
- Custom HooksExtracting reusable stateful logic into your own function starting with "use," the rules of hooks, and why two components sharing a custom hook still get independent state.9 min
- Controlled FormsMaking React state the single source of truth for an input's value, the controlled/uncontrolled distinction, handling many fields at once, and the case uncontrolled is required.9 min
Component API
- API Design for Shared ComponentsDesigning a shared component's props like a public API — composition over configuration, controlled vs. uncontrolled state, and the specific cost of a boolean-flag explosion.11 min
- Building a Component Library That ScalesWhy a shared component library is an internal product with real users, and the structural decisions — layering, ownership, documentation — that let it grow without collapsing.11 min
- Composition and ChildrenBuilding flexible components by passing other components in as children or props, rather than by trying to configure one giant component with an ever-growing list of options.8 min
Perf & scale
- useMemo and useCallbackMemoizing an expensive calculation and memoizing a function's identity across renders — what each buys you, and why reaching for either without measuring is often premature.10 min
- React.memoOpting a component out of the default "parent re-renders, so I re-render too" behavior — how the shallow prop comparison works, and how this optimization backfires when misapplied.8 min
- Virtualization for Large ListsWhy rendering ten thousand DOM nodes for a ten-thousand-row list is the wrong default, and how windowing renders only what's actually visible.10 min
- Memoization Strategy and Its CostsReact.memo, useMemo and useCallback actually explained as a trade of comparison cost for render cost — and why memoizing everything can make an app slower.11 min
Machine coding
- Build an autocompleteA text input that filters a fixed list as you type, and fills itself in when you pick a suggestion — the component behind every search box.medium
- Build accessible tabsSwitching panels is the easy 90% — the arrow-key navigation the ARIA tabs pattern actually requires is the part that gets skipped.easy
- Build collapsible nested commentsA recursive comment thread where collapsing a reply hides everything nested under it — Reddit and Hacker News both live or die on this one component.medium