Three methods and usage scenarios for lazy loading of react matters

Use scenarios and advantages and disadvantages are as follows:

()function:

Usage scenario: Suitable for React 16.6 and above, and only simple components need to be lazy to load.
Advantages: React's officially recommended method is simple and convenient to use, without the need to introduce additional libraries.
Disadvantages: The function is relatively simple and does not support custom loading transition effects.

Loadable library:

Use scenario: Suitable for lazy loading scenarios that require more configuration options and flexibility.
Advantages: Provides more configuration options, can customize the load transition effect, and supports handling when loading fails.
Disadvantages: The React Loadable library needs to be introduced, which is slightly more complicated than the() function.

3. Dynamic import syntax:

Usage scenario: Applicable to browser environments that support ES6, lazy loading scenarios that do not rely on any third-party libraries.
Advantages: Native way, no need to introduce additional libraries, suitable for simple lazy loading requirements.
Disadvantages: It cannot be used in an environment that does not support dynamic import syntax, and needs to manually handle loading status and error handling.

Summarize:

The () function is a method officially recommended by React. It is simple and convenient to use and is suitable for simple lazy loading scenarios.
The React Loadable library provides more configuration options and flexibility for lazy loading requirements that require more complexity.
Dynamic import syntax is a native way without introducing additional libraries, suitable for simple lazy loading requirements, but cannot be used in environments that do not support dynamic import syntax.

Select the appropriate method to implement lazy loading of components according to the specific project requirements and browser environment.

In React, you can use the following three methods to implement lazy loading of components:

1. Use the() function:

The () function is a new feature introduced by React version 16.6 and can be used to lazy load components. It accepts a function as an argument, which requires dynamically calling the import() function to load the component. When using the() function to lazy load the component, the component will be automatically wrapped into a React lazy load component.

Code example:

import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}
export default App;

illustrate:

First, use the() function to lazy load the component. The passed parameter is a function that dynamically loads the component through import().
In the component, use the Suspense component to wrap lazy loading components and set the fallback property to a loading prompt, which will be displayed when the component is loading.
When components are needed, React automatically loads and renders lazy-loaded components.

2. Use the React Loadable library:

React Loadable is a commonly used third-party library for lazy loading of components. It provides more configuration options and flexibility.

Code example:

import React from 'react';
import Loadable from 'react-loadable';
const LoadableComponent = Loadable({
  loader: () => import('./LazyComponent'),
  loading: () => <div>Loading...</div>,
});
function App() {
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      <LoadableComponent />
    </div>
  );
}
export default App;

illustrate:

First, use the Loadable function to create a lazy loading component. The passed parameter is a configuration object, where the loader property is a function, and the component is loaded dynamically through import().
In the component, use LoadableComponent directly to render lazy loaded components.
When components are needed, React Loadable automatically loads and renders lazy loaded components.

3. Use dynamic import syntax:

In ES6-enabled browsers, dynamic import syntax can be used to implement lazy loading of components. This approach does not require the introduction of additional libraries or functions.

Code example:

import React, { useState, useEffect } from 'react';
function App() {
  const [LazyComponent, setLazyComponent] = useState(null);
  useEffect(() => {
    import('./LazyComponent').then(component => {
      setLazyComponent();
    });
  }, []);
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      {LazyComponent ? <LazyComponent /> : <div>Loading...</div>}
    </div>
  );
}
export default App;

illustrate:

First, use useState and useEffect to define a state and side effect function.
In side effect functions, the component is loaded using dynamic import syntax and assign the loaded component to the state.
In a component, render lazy loaded components or prompts in loading based on their state.

All three methods can implement lazy loading of components. Which method to choose depends on personal preferences and project needs. The () function is the officially recommended method by React. It was introduced in React 16.6 version and is simple and convenient to use. The React Loadable library provides more configuration options and flexibility; and using dynamic import syntax is a native way, and no additional libraries are needed. Select the appropriate method according to the specific situation to implement lazy loading of components.

This is the end of this article about three methods of lazy loading of react matters. For more related react content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!