Hay varias formas de intentar evitar volver a renderizar el componente.

1. React.memo o React.PureComponent (la mejor manera) descubra más detalles en https://dmitripavlutin.com/use-react-memo-wisely/
2. Asegúrese de que los valores de propiedad no cambien
3. Pasar objetos como accesorios
4. Uso de claves para evitar re-renderizaciones
5. Evite cambios en la estructura del árbol DOM

puede encontrar más detalles en https://www.debugbear.com/blog/react-rerenders

Si está usando un componente de clase React, puede usar el método shouldComponentUpdate o una extensión de clase React.PureComponent para evitar que un componente se vuelva a renderizar. En el componente funcional, puede usar React.memo()

Memoización de un componente funcional de React con React.memo()

La memorización es una técnica de optimización. Se utiliza principalmente para acelerar el cálculo por historia del resultado de una función y devolver el resultado almacenado en caché, cuando se repiten las mismas entradas. El siguiente es un ejemplo del uso de React.memo()

 const Greeting = React.memo(props => { console.log("Greeting Comp render"); return <h1>Hi {props.name}!</h1>; }); function App() { const [counter, setCounter] = React.useState(0); // Update state variable `counter` // every 2 seconds. React.useEffect(() => { setInterval(() => { setCounter(counter + 1); }, 2000); }, []); console.log('App render') return <Greeting name="Ruben" /> }