Prevent image from rerendering at every state change - React

Question

In my component I have used an image in the following manner:


                    
                        
                    
                    
                        We are checking your details

This is a few lines from a big functional component that has many states in it. This component is also sometimes used as a child to other components.

Now, whenever a state gets updated, a re-render of the component happens. Natural.

However, a visual update on the image is visible, which is not a good UX.

Any help, on how to prevent such unnecessary re-rendering of images. Also, if there is any other way to use images in React, that could solve this problem, will be helpful.

user_1641941 · Answer

You can try to make image it's own pure component:

const Image = React.memo(function Image({ src }) {
  return ;
});

And then use it:


  
    
  
  
    We are checking your details

Here is a working snippet:

const Image = React.memo(function Image({ src }) {
  return ;
});

function App() {
  const [counter, setCounter] = React.useState(0);
  const src =
    'https://en.bcdn.biz/Images/2018/6/12/f0d2c2ca-dc61-4613-9685-6c98cbb8a990.jpg';
  React.useEffect(() => {
    const t = setInterval(() => {
      setCounter((c) => c + 1);
    }, 100);
  });
  return (
    
      {counter}
      
        
      
    
  );
}

ReactDOM.render(, document.getElementById('root'));

Prevent image from rerendering at every state change - React

1 Answers