React Basics

React ES6

React Hooks

React Suspense

React Suspense

What you'll learn

  • Understand the main ideas in React Suspense.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind React Suspense.

❮ Previous Next ❯

React Suspense

React Suspense allows your specific components to politely "wait" for something else to finish loading before they can render, proactively showing a fallback UI (like a loading spinner) while waiting. It is predominantly used with React.lazy for efficient code-splitting.

Using Suspense

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));


function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}><OtherComponent /></Suspense>
  );
}

❮ Previous Next ❯