React · Level 5

Advanced Patterns

This is the deck for the React you get asked about in system-design rounds and senior interviews. Context and reducers replace prop-drilling and sprawling useState chains; React.memo promises fewer renders and quietly breaks the moment a prop is re-created; error boundaries, portals and Suspense handle the app-shell concerns; and the server-component model redraws the line between what runs on the server and what ships to the browser. Each card isolates one pattern and, where it hurts most, the trap that comes with it.

Practice this set for free — no account needed. Loads 14 flashcards into the learner.

Practice in the free learner

How to study this set

Patterns stick when you attach them to a use case you have actually built — for every card, name the place in your own codebase where the pattern (or its trap) applies. The memoization cards deserve special attention: recite WHY the broken example re-renders before reading the fix, because that reasoning is exactly what interviews probe.

All 14 flashcards

What problem does React context solve?

Prop drilling — it lets a provider make a value available to any descendant, read with useContext, without threading it through every layer.

What does theme hold?
jsx
const ThemeContext = createContext('light');

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme} />;
}

<ThemeContext.Provider value="dark">
  <Toolbar />
</ThemeContext.Provider>;

"dark" — useContext reads the value of the nearest provider above the component; the 'light' argument is only the fallback when there is none.

When is useReducer a better fit than useState?

When the next state depends on structured transitions — several related fields, or updates triggered from many places. Actions centralize the logic in one reducer.

What is the state after dispatch({ type: 'add', amount: 5 })?
jsx
function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return { count: state.count + action.amount };
    default:
      return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 1 });

{ count: 6 } — the reducer returns a NEW state object computed from the previous state and the action.

What does React.memo do?

It wraps a component and skips its re-render when the new props are shallowly equal to the previous ones.

Why does the memoized child STILL re-render every time?
jsx
const Child = React.memo(List);

function Parent() {
  const [n, setN] = useState(0);
  return <Child options={{ pageSize: 10 }} />;
}

The options object is re-created on every render, so the shallow comparison always fails. Hoist it out or wrap it in useMemo (same trap with inline callbacks → useCallback).

What is an error boundary?

A component that catches render-time errors in its subtree and shows a fallback instead of unmounting the whole app — implemented with getDerivedStateFromError/componentDidCatch (or a library wrapper).

What do error boundaries NOT catch?

Errors in event handlers, async code (timeouts, promises) and server-side rendering — only errors thrown during rendering, lifecycle and constructors of the tree below.

What is a portal?

createPortal(children, domNode) renders children into a different DOM node (e.g. a modal layer at <body> level) while keeping them in the same React tree for context and events.

What does this pair give you?
jsx
const Editor = lazy(() => import('./Editor'));

<Suspense fallback={<Spinner />}>
  <Editor />
</Suspense>;

Code-splitting: the editor's bundle loads on demand, and Suspense shows the spinner until it (and anything else suspending inside) is ready.

How do you force a component to reset its internal state from the outside?

Change its key — React treats a new key as a different instance and remounts it with fresh state:

jsx
<ProfileForm key={userId} />
What is hydration?

Attaching React to server-rendered HTML: the client renders the same tree and wires up event handlers instead of rebuilding the DOM — mismatched output triggers hydration warnings.

Server components vs client components — what is the core difference?

Server components run only on the server and ship no JavaScript to the browser; a 'use client' directive marks the boundary where interactive client components begin.

Can you use Web Components inside React?

Yes — custom elements render in JSX like native tags (<hello-world />). They stay framework-independent, which makes them a solid choice for shared UI used beyond React.

What to learn next

You have reached the top of the React path. Keep the cards in rotation so they stay fresh, and round out the picture with the "Web Development" category — how the web works, HTML/CSS/JavaScript and APIs — or go breadth-first with "Fundamentals" for data structures and Big-O.