[React] Import on Visibility

Source: https://javascriptpatterns.vercel.app/patterns/performance-patterns/import-on-visibility

 

One way to dynamically import components on interaction, is by using the Intersection Observer API. There's a React hook called react-intersection-observer that we can use to easily detect whether a component is visible in the viewport.

import { Suspense, lazy } from "react";
import { useInView } from "react-intersection-observer";
const Listing = lazy(() => import("./components/Listing"));

function ListingCard(props) {
  const { ref, inView } = useInView();

  return (
    <div ref={ref}>
      <Suspense fallback={<div />}>{inView && <Listing />}</Suspense>
    </div>
  );
}