Display Fallbacks with React.Suspense
Explore how to use React Suspense to manage fallback content during lazy loading of components. Understand the fallback prop, how to nest Suspense for better performance, and practical scenarios for using placeholders while loading parts of your app.
We'll cover the following...
The fallback prop
Firstly, the Suspense component on the React object was named “Placeholder". This is a very accurate description of the task it fulfills: it acts like a placeholder for components that have not yet been rendered and displays alternative content in the meantime. These placeholders can take many forms. They can be a message that parts of the application are still being loaded or take the form of a loading animation. The placeholder we want to display is passed to Suspense in the fallback prop, and must be defined. Any valid React element can be used and passed as a prop. Strings like the following are also valid:
<Suspense fallback="Loading ...">[…]</Suspense>
As long as the component you want to lazy load has not fully loaded, all children of the Suspense element will be replaced with the ...