Lazy Loading Components and Images in React

Implement lazy loading of components and images in React applications, and improve performance by: 1. Use React.lazy and Suspense to lazy load components, wrap the components in React.lazy and display the load status with Suspense. However, it is necessary to note that only supports default export and is not suitable for the core module on the first screen; 2. Use the native loading="lazy" attribute, Intersection Observer to manually monitor viewport changes or introduce third-party libraries such as react-lazyload; 3. Pay attention to path statics, wrapping error boundaries to prevent crashes and SSR compatibility issues.

Implementing lazy loading of components and images in React applications is an effective means to improve page performance and optimize user experience. The key is to load content on demand and reduce the initial loading time.

1. Use React.lazy and Suspense to lazy load components

React provides a built-in way to lazy load components, mainly through React.lazy and Suspense .

• Basic practice : wrap components that need to be lazy to load in React.lazy , and cooperate with <suspense fallback></suspense> to display the placeholder content when loading.

Example:

 const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  Return (
    <Suspense fallback="Loading...">
      <LazyComponent />
    </Suspense>
  );
}

• Notes :
  • React.lazy only supports default export.
  • It is recommended to add a loading animation or skeleton screen fallback to improve user perception and experience.
  • Not suitable for use in the core functional module of the first screen, otherwise it may affect the first interactive experience.

2. Several ways to load images

For image resources, React itself does not have a dedicated API, but it can be implemented through browser native properties and third-party libraries.

Use loading="lazy" attribute

Modern browsers support native lazy loading:

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Lazy Loading Components and Images in React" loading="lazy" />

• Advantages: Simple, no extra dependencies required.
• Disadvantages: Limited compatibility and not available for all browsers.

Manual implementation using Intersection Observer

You can encapsulate a lazy loading image component to monitor whether to enter the viewport and then load the real image:

 function LazyImage({ src, alt }) {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '0px 0px 200px 0px' }
    );

    if (ref.current) observe.observe(ref.current);

    return () => observer.disconnect();
  }, []);

  return <img ref={ref} src={isVisible ? src : placeholderUrl} alt={alt} />;
}

• Tips: You can load the picture "a certain distance below the visual area" in advance to avoid the user seeing blank space when scrolling.

Recommended by third-party library

Library such as react-lazyload or gatsby-image have encapsulated logic and are suitable for situations where the project is larger or there are complex needs.

3. Some small details that are easy to ignore

• Dynamic import path problem : When using React.lazy(() => import(...)) , the path must be a static string and variables cannot be spliced, otherwise Webpack will not be packaged correctly.
• Error Boundaries : It is recommended to wrap the error boundary component in the outer layer Suspense to prevent loading failures and cause the entire application to crash.
• Server-side rendering (SSR) support : If it is an SSR project (such as Next.js), you must confirm whether the lazy loading scheme you are using is compatible with server-side rendering.

Basically these methods. Lazy loading is not particularly difficult to achieve, but in actual projects, you need to pay attention to loading order, placeholding experience and compatibility processing in order to truly take advantage of performance advantages.

The above is the detailed content of Lazy Loading Components and Images in React. For more information, please follow other related articles on the PHP Chinese website!