useImagesAreLoaded.js

import { useEffect, useState } from 'react';

interface IProps {
  imagesToLoad: string[],
}

const useImagesAreLoaded = ({ imagesToLoad }: IProps): boolean => {
  const [loadedTilesCount, setLoadedTilesCount] = useState(0);

  useEffect((): void => {
    imagesToLoad.forEach((src: string): void => {
      const img = new Image();
      img.src = src; // by setting an src, you trigger browser download
      img.onload = (): void => {
        // when it finishes loading, update the component state
        setLoadedTilesCount((prevCount: number): number => prevCount + 1);
      };
    });
  }, []);

  return loadedTilesCount === imagesToLoad.length;
};

export default useImagesAreLoaded;