React onLoad event on image tag is not getting called when using conditional render

Question

I'm using the stateless functional component to add spinner while image is loading from the external resource, like so:

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }
  return loaded
     ? <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
       /> 
     : <Spin />
}

And use it like so:

<ExternalImage src={image.src} alt={image.alt} className="image" />

Why would the onLoad never get called?

Answer 1

When image is not loaded you aren't actually rendering the image. You need to render it for its onLoad to fire

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }
  return (
    <>
        <img 
        style={{display: loaded? 'block': 'none'}}
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
       /> 
       {!loaded && <Spin /> }
    </>
  )
}