Image loading in react “with refs” vs “with state”

Solution for Image loading in react “with refs” vs “with state”
is Given Below:

What I want to do is, I’ve an Image component which shows some loading state as placeholder colour (via css background-colour) till image loads then swap it with the actual image.

Css

.show-img {
  opacity: 1;
  transition: all 0.3s ease-in;
}
.hide-img {
  background-color:#eee;
  opacity: 0;
  transition: all 0.3s ease-in;
}

Using state

const Image = () => {
  const [loading, setLoading] = useState(false);

  const onImgLoad = () => {
    setLoading(true);
  };

  return (
    <img
      src="https://i.picsum.photos/id/498/200/300.jpg"
      className={loading ? 'hide-img' : 'show-img'}
      onLoad={onImgLoad}
    />
  );
};

Using refs

const Image = () => {
  const ref = useRef();

  const onImgLoad = (e) => {
    //if img is loaded
    if (e.target.src && ref.current) {
      ref.current?.classList?.remove('hide-img');
      ref.current?.classList?.add('show-img');
    }
  };

  return (
    <img
      ref={ref}
      src="https://i.picsum.photos/id/498/200/300.jpg"
      className="hide-img"
      onLoad={onImgLoad}
    />
  );
};

I want to know which one of the approach is more performant and why? I was thinking about avoiding re-rendering due to state update for such a basic task (maybe).

PS: I’ve this Image component inside the carousel and there are multiple carousels on the page.

Thank you,

Theoretically speaking, I would argue that using state is more performant as the state is handled by react and its virtual DOM which is way faster than updating the DOM directly with useRef. Additionally, using state warranties the component re-rendering but optimised by react, which means only when its needed. I used the following articles to reach to this conclusion.

https://medium.com/swlh/useref-explained-76c1151658e8

https://blog.logrocket.com/usestate-vs-useref/

Nonetheless you may have to implement a profiler to check if this is true, as for the final user it may not look as the fastest solution, due to other circumstances outside react, like the amount of images, the connection speed and whether the images are in a CDN or not, just to mention some.