18. What are Lazy Loading and Suspense in React?
hard

Suspense and "Lazy Loading" are two related yet distinct concepts in React that aim to improve performance, especially when dealing with complex or remote data loading. These features help optimize application rendering by allowing you to display a fallback component while waiting for the actual content to load.


What is Lazy Loading?

  • Lazy loading is a technique used to defer the initialization of components until they are actually needed. In React, lazy loading can be achieved using the import() function and the Suspense API together.

How Does it Work?

When you want to load a component lazily, you use the import() function with a dynamic import specifier:

const LazyComponent = import('./LazyComponent.js').then(
(module) => module.default);

Then, you can render this lazily loaded component inside a Suspense wrapper:

function MyComponent() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <MyLazyComponent />
        </Suspense>
    );
}

In this example, when the user navigates to the MyComponent, the Suspense component will render its child (MyLazyComponent) lazily.

Benefits of Lazy Loading

  • Improved performance: By deferring the loading of components, you can improve initial page load times.
  • Better user experience: The user sees a placeholder or fallback while waiting for the actual content to load, which helps maintain their engagement.
  • Reduced memory usage: Components are loaded as needed, reducing unnecessary memory allocation.

Key Points

  • Suspense is not just for lazy loading: While it's often used in conjunction with lazy loading, Suspense can also be used to display a fallback when data is still being fetched or computed.
  • import() and Suspense are not mutually exclusive: You can use both together to achieve more complex scenarios.

Example: Combining Lazy Loading and Suspense

Below is an example that combines lazy loading and Suspense to display a fallback while waiting for remote data to load:

function MyComponent() {
    const [data, setData] = React.useState(null);

    const loadRemoteData = async () => {
        // Simulate remote data loading with a delay.
        await new Promise((resolve) => setTimeout(resolve, 2000));
        setData(['Item 1', 'Item 2']);
    };

    if (!data) {
        return (
            <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
            </Suspense>
        );
    }

    return (
        <div>
            {/* Display the loaded data */}
            {data.map((item, index) => (
                <p key={index}>{item}</p>
            ))}
        </div>
    );
}

// Define the lazy component
const LazyComponent = import('./LazyComponent.js').then(
    (module) => module.default
);

In this example, we combine lazy loading and Suspense to display a fallback while waiting for remote data to load. Once the data is loaded, we render it inside the same Suspense component.


Note

  • Use cases for Lazy Loading: When dealing with complex or remote data loading, lazy loading can be an effective optimization technique.
  • Properly handle errors and edge cases: Make sure to consider error handling and edge cases when implementing lazy loading and suspense in your application.
PreviousNext