QReact · Interview preparation
Why can React context cause unnecessary renders?
Components that consume a context value render again when that value changes, even if a nested field they care about did not.
The idea to remember.
Components that consume a context value render again when that value changes, even if a nested field they care about did not. Split unrelated contexts or use selectors where profiling shows a problem.
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 why can React context cause unnecessary renders 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 ↗