react hook to check webp support

checkWebPSupport.js

//   https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
export const checkWebPSupport = callback => {
  const kTestImages = {
    lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'
  }

  const img = new Image()
  img.onload = () => {
    const result = img.width > 0 && img.height > 0
    callback(result)
  }

  img.onerror = function() {
    callback(false)
  }

  img.src = 'data:image/webp;base64,' + kTestImages.lossy
}

useWebP.js

import { useState, useEffect } from 'react'
import { checkWebPSupport } from './checkWebPSupport'

export const useWebP = () => {
  const [supported, setSupported] = useState(false)

  useEffect(() => {
    checkWebPSupport(result => {
      setSupported(result)
    })
  }, [])

  return supported
}

This is amazing, however... it makes react render the src-attribute of my images twice,
once with jpg and once with webp.

This is amazing, however... it makes react render the src-attribute of my images twice,
once with jpg and once with webp.

how ?

Because onload is async. So supported is "false" ... and then the Effect ties to determine if WebP is supported.
and then supported is "true". so the src of the image switches.