Wait for Image Loaded

From this article by Josh Comeau, a method to wait for an image to load before rendering animations (or other things).

function ShapeLayer() {
  const [hasLoaded, setHasLoaded] = React.useState(false);
  React.useEffect(() => {
    const img = new Image();
    img.src = "/images/shape-sprite.png";
    img.onload = () => {
      setHasLoaded(true);
    };
  }, []);
  if (!hasLoaded) {
    return null;
  }
  // Once `hasLoaded` is true, render all of the shapes...
}