title: Image loading in react "with refs" vs "with state"
body: <p>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.</p>
  <p><strong>Css</strong></p>
  <pre><code>.show-img {
    opacity: 1;
    transition: all 0.3s ease-in;
  }
  .hide-img {
    background-color:#eee;
    opacity: 0;
    transition: all 0.3s ease-in;
  }
  
  </code></pre>
  <p><strong>Using state</strong></p>
  <pre><code>const Image = () =&gt; {
    const [loading, setLoading] = useState(false);
  
    const onImgLoad = () =&gt; {
      setLoading(true);
    };
  
    return (
      &lt;img
        src=&quot;https://i.picsum.photos/id/498/200/300.jpg&quot;
        className={loading ? 'hide-img' : 'show-img'}
        onLoad={onImgLoad}
      /&gt;
    );
  };
  </code></pre>
  <p><strong>Using refs</strong></p>
  <pre><code>const Image = () =&gt; {
    const ref = useRef();
  
    const onImgLoad = (e) =&gt; {
      //if img is loaded
      if (e.target.src &amp;&amp; ref.current) {
        ref.current?.classList?.remove('hide-img');
        ref.current?.classList?.add('show-img');
      }
    };
  
    return (
      &lt;img
        ref={ref}
        src=&quot;https://i.picsum.photos/id/498/200/300.jpg&quot;
        className=&quot;hide-img&quot;
        onLoad={onImgLoad}
      /&gt;
    );
  };
  </code></pre>
  <p>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).</p>
  <p>PS: I've this Image component inside the carousel and there are multiple carousels on the page.</p>
  <p>Thank you,</p>