...

/

Display Fallbacks with React.Suspense

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
...