Image onLoad event in isomorphic/universal react - register event after image is loaded

Question

In isomorphic rendered page image can be downloaded before main script.js file. So image can be already loaded before react register onLoad

Answer 1

This is all a bit tidier with Hooks:

const useImageLoaded = () => {
  const [loaded, setLoaded] = useState(false)
  const ref = useRef()

  const onLoad = () => {
    setLoaded(true)
  }

  useEffect(() => {
    if (ref.current && ref.current.complete) {
      onLoad()
    }
  })

  return [ref, loaded, onLoad]
}

const SomeComponent = ({ src }) => {
  const [ref, loaded, onLoad] = useImageLoaded()

  return (
    

      
      {loaded && 
Loaded!
}
    
  )
}