AceDevHub
Intermediate React Interview QuestionsIntermediateScenario

React · Question 56

A child is wrapped in memo but still re-renders every time its parent renders. What would you inspect first?

Direct answer

Inspect whether the parent creates new object, array, or function props on every render, because new references can make props compare as changed even when their contents look equivalent.

Search.jsx
const Results = memo(function Results({ options }) {
  return <pre>{JSON.stringify(options)}</pre>;
});

function Search({ query }) {
  // New object on every render:
  const options = { query, limit: 20 };

  return <Results options={options} />;
}
  • First: confirm the re-render is actually expensive with profiling.
  • Then: inspect prop identities and whether the child also reads changing context or has its own state.
  • If necessary: restructure props, memoize a meaningful value, or rely on React Compiler when enabled.