QReact · Interview preparation
What is the purpose of React Suspense?
Suspense displays a fallback while a supported child operation is waiting, such as a lazy-loaded component.
The idea to remember.
Suspense displays a fallback while a supported child operation is waiting, such as a lazy-loaded component. Suspense does not automatically turn ordinary useEffect fetching into a data integration.
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 is the purpose of React Suspense 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 ↗