Simple React Hook which handles the status (loading, loaded or failed) of your images. It does a bit of caching.

useImage.js

const { useState, useEffect, useRef } = require('react');

function useImage({ src }) {
  let [ image, setImage ] = useState({ src: null, status: 'loading' });
  let imageElement = useRef();
  let loadedUrls = useRef(new Set());

  useEffect(() => {
    const onload = () => { 
      setImage(img => {
        loadedUrls.current.add(img.src);
        return { ...img, status: 'loaded' };
      });
      
    };
    const onerror = () => { setImage(img => ({...img, status: 'failed'})) };
    imageElement.current = document.createElement('img');
    imageElement.current.addEventListener('load', onload);
    imageElement.current.addEventListener('error', onerror);
    return function cleanup() {
      imageElement.current.removeEventListener('load', onload);
      imageElement.current.removeEventListener('error', onerror);
    };
  }, []);


  useEffect(() => {
    if (!src || loadedUrls.current.has(src)) {
      // No image, or already loaded.
      setImage({ src: src, status: 'loaded' });
    }
    else {
      // New image to load.
      imageElement.current.src = src;
      setImage({ src: src, status: 'loading' });
    }
  }, [src]);

  return { 
    src: image.src,
    isLoading: image.status === 'loading', 
    isLoaded: image.status === 'loaded', 
    hasFailed: image.status === 'failed'
  };
};

export default useImage;

Thanks for the component. Btw, what's the idea of having multiple loadedUrls if there's a single src argument?

Hi @Kutalia! loadedUrls acts as a tiny cache: even though the hook receives one src at a time, that prop can change over the component’s lifetime (in a slideshow, for instance). Storing every successfully loaded URL lets us instantly mark repeats as “loaded,” avoiding extra network requests and flicker.

@jordymeow btw, it has a memory leak: you need to clear the generated img element, right? I added returning the clear function which is run in the caller component on unmount:
const clear = useCallback(() => { if (imgEl.current) { imgEl.current.remove() } }, [])