QReact · Interview preparation
What causes a React component to re-render?
A practical look at state, parent renders, context updates, and memoization.
The idea to remember.
A component can render again when its own state changes, when its parent renders, or when a context value it reads changes. A re-render does not necessarily mean the DOM changes. Memoization can skip some child renders when inputs are referentially stable, but it should be used where the avoided work is meaningful.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: understand a render
01 / BEGINNERA render calculates UI; it does not always change the DOM.
function Greeting({ name }) {
console.count('Greeting rendered');
return <h2>Hello, {name}</h2>;
}Intermediate: memoize derived work
02 / INTERMEDIATEMemoize an expensive derived value when profiling justifies it.
const visibleRows = React.useMemo(
() => rows.filter(row => row.label.includes(query)),
[rows, query]
);Real scenario: stabilize props
03 / REAL SCENARIOOnly optimize a frequently updated dashboard after measuring.
const Chart = React.memo(function Chart({ data }) {
return <Graph data={data} />;
});
function Dashboard({ records, filter }) {
const data = React.useMemo(() => aggregate(records, filter), [records, filter]);
return <Chart data={data} />;
}02Check your understanding
Try it in your own words.
Explain what causes a React component to re-render without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗