Lazy loading react components is a way of deferring the rendering of components until they're needed. For below-the-fold content, it often makes sense to lazy load components, especially if they're detrimental to the performance if loaded upfront. I personally prefer to deal with lazy load heavy images and videos which appear below the fold. It helps increase core web vitals. What is an intersection observer? An intersection observer is a JavaScript API that allows you to monitor an element in your web page and note when it enters or exits the viewport. This can be useful for various purposes, such as triggering animations, lazy loading content, or implementing infinite scroll. The intersection observer API works by setting up a "callback" function that is executed whenever the target element intersects with the viewport, allowing you to respond to these events in your code. Browser support for intersection observer The intersection observer API is supported by most modern web browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported by older browsers or some mobile browsers. You can check the specific browser support for the intersection observer API on , which tracks browser support for different web technologies. If your target browser doesn't support it, you can polyfill (add support for) the API in order to use it in your code. caniuse.com Lazy Loading React Components using intersection observer (the hard way) To use the intersection observer API in React, you can use the hook to create a reference to the element you want to monitor and the hook to set up the observer. Here is an example of how you might do this: useRef useEffect function MyComponent() {
  // Create a reference to the element that we want to observe
  const targetElement = useRef(null);
  const [isInView, setIsInView] = useState(false);

  // Set up the intersection observer when the component mounts
  useEffect(() => {
    const observer = new IntersectionObserver(onIntersection, {});
    observer.observe(targetElement.current);

    // Clean up the observer when the component unmounts
    return () => observer.unobserve(targetElement.current);
  }, []);

  // This is the callback function that is executed whenever the
  // target element intersects with the viewport
  function onIntersection(entries) {
    // Do something with the intersection data, such as triggering
    // an animation or lazy loading content
    setIsInView(true);
  }

  return (
    <div ref={targetElement}>{isInView ? <VeryHeavyComponent /> : null}</div>
  );
} In this example, we used the hook to create a reference to the element we want to observe and the hook to set up the intersection observer when the component mounts. When the target element intersects with the viewport, the callback function is executed, allowing you to respond to the event in your code. useRef useEffect onIntersection Make sure to clean up the you subscribed in . It's an important optimization of useEffect. IntersectionObserver useEffect Lazy Loading React Components using intersection observer (the easy way) The package is a wrapper around the IntersectionObserver API and makes lazy loading less verbose and easy-peasy. Let's take a look at an example: react-intersection-observer const Video = (props) => {
  const { ref, inView } = useInView({
    triggerOnce: true,
    fallbackInView: true,
  });

  return <div ref={ref}>{inView ? <video {...props} /> : null}</div>;
}; In this example, the component is a wrapper around HTML's native element. We only render when it is in the viewport. It helps boost the performance of the page and core web vitals. You can pass various configurations to the hook as described in the . For example, you can specify a threshold value to control when the component should be considered visible or add a root margin to adjust the boundaries of the viewport. Video video video useInView documentation In conclusion, using the IntersectionObserver API or package allows us to implement lazy loading in React components. This can improve the performance of our application by delaying the rendering of heavy components until they are actually needed. By using the hook and monitoring when a component enters the viewport, we can efficiently lazy load our components and improve the user experience. react-intersection-observer useInView Also published here.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Lazy Load React Components with an Intersection Observer

Too Long; Didn't Read

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Lazy Load React Components with an Intersection Observer

Too Long; Didn't Read

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES