ReactRenderingMemoizationPerformancemiddle level

React re-renders and memoization

the question

What causes a React component to re-render? When would you use `React.memo`, `useMemo`, or `useCallback`, and when would you avoid them?

what they're testing: The interviewer is probing whether you understand React's rendering model well enough to optimize measured work without cargo-culting memoization.

a strong answer

React re-renders a component when its state updates, when a context it reads changes, or when its parent renders. An ordinary child therefore renders with its parent even if its props are identical. A prop change usually arrives through that parent render; it is not a separate trigger.

A re-render means React calls the component again to calculate its next output. It does not mean the DOM is rewritten. During the commit, React applies only the necessary DOM changes, and it may touch no DOM at all if the output is unchanged.

Use memoization when measurement shows repeated work matters. By default, React.memo can let a child skip a parent-driven render when every prop compares equal with Object.is, although the skip is not guaranteed. Its own state and consumed context can still make it render. useMemo caches a calculation result and can keep an object or array prop stable for a memoized child. useCallback keeps a function reference stable, which is useful for a memoized child or another identity-sensitive Hook. A fresh object or function defeats the default prop comparison. Memoization adds comparisons and complexity, and React Compiler can automate much of it, so wrapping everything by default rarely helps.

Why it lands

Names state, context, and parent renders as the practical triggers.
Separates component rendering from DOM updates.
Gives each memoization API a specific, measured use case.
Explains why unstable object and function props defeat `React.memo`.

Where people slip

Saying a child renders only when its props change.
Treating every re-render as a DOM update.
Adding `useCallback` without a memoized consumer or another identity-sensitive use.
Saying memoization is free, so every component and callback should use it.

If they push further

Does `React.memo` stop updates from state or context?

No. It can skip a parent-driven render when props compare equal, but the component still renders for its own state changes and context values it consumes.

Why can an inline callback defeat `React.memo`?

Each parent render creates a new function reference, so the shallow prop comparison sees a change. `useCallback` helps only when keeping that identity stable enables a useful optimization.

How would you prove memoization helped?

Record the same representative interaction in React DevTools Profiler before and after the change, then compare render duration and which components rendered. For production measurements, use a profiling-enabled production build.

Sources

Now answer it yourself.

Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.

was this useful?

beta

The interviewer part is in the works.

The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.