¿Cómo resolver demasiados errores de renderizado en ReactJS?

«Demasiados re-renderizadores» es un error de React que ocurre después de haber alcanzado un bucle de renderizado infinito, generalmente causado por un código que en un enlace useEffect o el cuerpo principal del componente mismo llama incondicionalmente a los establecedores de estado. 

¿Cuándo decide React volver a renderizar un componente?

• El primer renderizado se activará después del ciclo de vida del componenteWillMount.
• Después del ciclo de vida de React ComponentWillUpdate, se activa.
• Después de montar un componente de React, escuchará cualquier accesorio o estado de React que haya cambiado.
• De forma predeterminada, volverá a renderizar todo el componente React y sus componentes secundarios cuando detecte que algo ha cambiado.

Estos son algunos consejos para evitar demasiados errores de renderizado en React:

• No cambie el estado en el cuerpo principal del componente.
• Use el gancho useEffect con mucha precaución. El segundo parámetro de useEffect es una array de estados basada en la llamada de useEffect. Por lo tanto, no actualice esos estados en useEffect, de lo contrario, volverá a representar el componente una y otra vez.
• Use React shouldComponentUpdate: React shouldComponentUpdate es un método para optimizar el rendimiento, que le dice a React que deje de volver a renderizar un componente, aunque haya cambiado el estado o los valores de prop. Usar este enfoque solo si una parte permanece sin cambios o pura mientras se usa. Se espera que devuelva un valor booleano con el método React shouldComponentUpdate. Devuelve true si necesita volver a renderizarse o false para evitar que se vuelva a renderizar.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Nombre de archivo: App.js: a continuación se muestra un ejemplo de cómo usar React shouldComponentUpdate. He construido 2 componentes de React en este código. Uno es parte del saludo y el otro es el componente de la aplicación. Durante el ciclo de vida del procesamiento, cada componente de React es una consola que registra un mensaje.

import React from "react";
class Greeting extends React.Component {
  render() {
    console.log("Greeting - Render lifecycle");
  
    return <h1>Geeksforgeeks</h1>;
  }
}
  
class App extends React.Component {
  render() {
    console.log("App - Render lifecycle");
  
    return <Greeting />;
  }
}
  
export default App;

Producción:

Filename- App.js: A continuación, en el ciclo de vida de React del componenteDidMount, agregaré el estado React y actualizaré el valor del estado.

import React from "react";
  
class Greeting extends React.Component {
  render() {
    console.log("Greeting - Render lifecycle");
  
    return <h1>Geeksforgeeks</h1>;
  }
}
  
class App extends React.Component {
  state = {
    greeted: false,
  };
  
  componentDidMount() {
    this.setState({ greeted: true });
  }
  
  render() {
    console.log("App - Render lifecycle");
  
    return <Greeting />;
  }
}
  
export default App;

Salida: puede ver en la salida que el ciclo de vida de procesamiento se activó más de una vez en los componentes de la aplicación y el saludo. Esto se debe a que el componente de la aplicación React se volvió a renderizar, después de actualizar los valores de estado, y sus componentes secundarios también se volvieron a renderizar. Deberíamos suponer que la parte del saludo no ha cambiado y que nunca cambiará.

Filename- App.js: Usa el gancho shouldComponentUpdate cuando esté claro que en todo momento un componente que estemos creando será estático.

import React from "react";
class Greeting extends React.Component {
  shouldComponentUpdate() {
    console.log("Greeting - shouldComponentUpdate lifecycle");
  
    return false;
  }
  
  render() {
    console.log("Greeting - Render lifecycle");
  
    return <h1>Geeksforgeeks</h1>;
  }
}
  
class App extends React.Component {
  state = {
    greeted: false,
  };
  
  componentDidMount() {
    this.setState({ greeted: true });
  }
  
  render() {
    console.log("App - Render lifecycle");
  
    return <Greeting />;
  }
}
  
export default App;

Salida: puede ver que la aplicación y el componente de saludo pasaron por una ronda del ciclo de vida de representación. Después de cambiar los valores de estado, el componente de la aplicación volvió a pasar por el ciclo de vida de representación. Pero el componente Saludo no registró en la consola el mensaje de Lifecycle Render.