I'm building an app in Next.JS with React and we have an image blur-up implementation that works well with one issue. Here's a sketch of the implementation:

function ImageElement({src, srcSet, sizes, base64}){
  const [loaded, setLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    if(imgRef.current.complete){
      setLoaded(true)
    }
  }, []);

  return (
    <div>
      <img className="placeholder" src={base64} alt="" />
      <img
        className="regular"
        srcSet={srcSet}
        sizes={sizes}
        loading="lazy"
        decoding="async"
        style={{
          opacity: loaded ? 1 : 0
        }}
        ref={imgRef}
        onLoad={handleLoaded}
      />
    </div>
  );

There's also a transition: opacity 500ms ease 0s rule on the image and various other css to make it work (these don't seem to be the source of the issue though).

The problem I'm having is that because the opacity always starts at 0, it does a blur-up every time the page loads, even when the image is cached and it doesn't need to. I want to find a way to check that it's cached before it renders the first time but nothing I've tried has worked.

I tried a function that creates an img element and checks if it's loaded but it doesn't seem to work when I build and I get this error message in dev mode:

Prop `style` did not match. Server: "opacity:0" Client: "opacity:1"

Is there something I'm missing?.