A little lazyloaded image component using IntersectionObserver API

Image.js

import React, { useEffect, useRef, useState } from "react";
import { string } from "prop-types";

const usePrevious = value => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const Image = ({ src, alt, ...props }) => {
  const [isVisible, setVisible] = useState(false);
  const img = useRef();
  const prevUrl = usePrevious(src);

  const observe = (entries, observer) => {
    const img = entries[0];
    if (img.isIntersecting) {
      setVisible(true);
      observer.disconnect();
    }
  };

  useEffect(() => {
    const { current } = img;
    const observer = new IntersectionObserver(observe);
    observer.observe(current);
    return () => observer.disconnect();
  }, [src]);

  if (isVisible && prevUrl === src) {
    props.src = src;
  } else if (isVisible && prevUrl !== src) { // receiving new src props
    setVisible(false);
  }

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

Image.propTypes = {
  src: string.isRequired,
  alt: string.isRequired
};

export default Image;