Display Fallbacks with React.Suspense
Learn how you can render a component tree in the background and simultaneously display a message while the components are loading.
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:
<Suspens
...