Lazy Loading in React

Image.js

import PropTypes from "prop-types";
import React from "react";

function Image({ src: ImageSrc, root, rootMargin, threshold, alt, ...props }) {
  const [src, setSrc] = React.useState(false);
  const imageRef = React.useRef(null);

  const callback = React.useCallback((entries) => {
    const [entry] = entries;
    if (entry.isIntersecting) {
      setSrc(ImageSrc);
    }
  }, []);

  React.useEffect(() => {
    const observer = new IntersectionObserver(callback, {
      root,
      rootMargin,
      threshold,
    });
    observer.observe(imageRef);
    return () => {
      observer.disconnect();
    };
  }, [callback, root, rootMargin, threshold, imageRef]);

  return <img src={src} alt={alt} {...props} />;
}

Image.propTypes = {
  alt: PropTypes.string.isRequired,
  root: PropTypes.oneOfType([
    null,
    PropTypes.func,
    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
  ]),
  rootMargin: PropTypes.string,
  src: PropTypes.string.isRequired,
  threshold: PropTypes.number,
};

Image.defaultProps = {
  root: null,
  rootMargin: "0px",
  threshold: 0.01,
};

LazyLoading.js

import React, { Suspense } from "react";
import About from './About'
const Posts = React.lazy(() => import("./Posts"));
const Newsletter = React.lazy(() => import("./Newsletter"));

function About() {
  return (
    <div>
     <About/>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <Posts />
          <Newsletter />
        </section>
      </Suspense>
    </div>
  );
}

VirtualTable.js

import { FixedSizeList as List } from "react-window";

function itemKey(index, data) {
  const item = data[index];
  return item.id;
}
const Item = ({ index, style }) => <div style={style}>Item {index}</div>;

const Table = () => (
  <List
    itemKey={itemKey}
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Item}
  </List>
);