Advanced React & Redux
You already know basic components and hooks; this section is about managing data and re-renders at scale. Two big parts. The first is React's own tools on top of props: context (deliver a value deep into the tree without prop drilling), refs (imperative access outside rendering), memoization (skip a needless re-render), and logic-reuse patterns.
The second is Redux: a predictable state container with a unidirectional data flow. Understanding Redux is tested even where it is not used, because it expresses general principles — immutability, pure reducers, side effects in middleware. The cross-cutting trap of the whole section is reference identity: a new object or function on every render defeats memoization, selectors, and re-render bail-outs alike. The full map lives in the layers below.
Topic map
- Context — delivering a value deep into the tree without prop drilling, and the re-render cost to consumers.
- Refs — an imperative escape hatch to a DOM node or instance, surviving renders without causing one.
- Memoization and re-renders — what triggers a re-render and how
Component/PureComponent/React.memoskip it. - Reuse patterns — HOC and render props — three ways to share cross-cutting logic, and why hooks superseded the first two.
- Redux data flow — the store, actions, pure reducers,
dispatch, and the unidirectional cycle. - Middleware — the layer between
dispatchand the reducers where side effects live; thunk versus saga. - Selectors — memoized computation of derived data with
reselect. - State normalization — flattening nested data into id-keyed lookups for cheap updates.
Common traps
| Mistake | Consequence |
|---|---|
| A new object literal as the provider value every render | Every context consumer re-renders for nothing |
| Fast-changing data (mouse, scroll) in context | Large subtrees re-render on every change |
A new inline object/array/function prop on a React.memo child | The shallow compare sees a change — the bail-out is defeated |
Mutating a nested object under PureComponent/memo | The shallow compare misses it — the UI does not update |
Expecting a ref.current mutation to re-render | Nothing happens — refs are deliberately outside rendering |
| Mutating state inside a reducer | Immutability is broken; subscribers are not notified correctly |
| A side effect/async directly in a reducer | The reducer stops being pure; effects belong in middleware |
| A selector building a new object on every call | Memoization is defeated and the connected component re-renders |
Interview relevance
This section tests systems thinking: do you see that re-renders and memoization rest on reference identity, and Redux on immutability and pure reducers. A candidate who says "side effects go in middleware because a reducer must stay pure" shows they see the architecture rather than having memorized the API.
Typical checks:
- What problem context solves and why it is neither a state manager nor a blanket replacement for props.
- What triggers a re-render and that
React.memocompares shallowly, not deeply. - The difference between a HOC, render props, and custom hooks.
- The unidirectional Redux flow and why reducers are pure.
- Where side effects belong in the flow (middleware) and how thunk differs from saga.
- What a memoized selector is and why you normalize state.
Common wrong answer: "context is a replacement for Redux". Context only delivers an already-existing value deep into the tree; it holds no update logic, offers no middleware, and re-renders every consumer if the value is supplied carelessly.