¿Qué hace “shouldComponentUpdate” y por qué es importante?

shouldComponentUpdate es un método de ciclo de vida en React. Este método hace que el componente se vuelva a renderizar solo cuando hay un cambio en el estado o las propiedades de un componente y ese cambio afectará la salida. 

El shouldComponentUpdate() se invoca antes de representar un componente ya montado cuando se reciben nuevos accesorios o estados.

Sintaxis:

shouldComponentUpdate(nextProps, nextState)

Parámetros: Acepta dos parámetros llamados nextProps y nextState . shouldComponent devuelve el valor booleano de si devolver el componente o no, comparando la propiedad y el estado existentes con nextProps y nextState.

Valor devuelto: este método de forma predeterminada devuelve verdadero, lo que significa que el componente se volverá a renderizar y, si devuelve falso, no se invocará el método render(), componentWillUpdate() y componentDidUpdate().

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.

Estructura del proyecto

Implementación: escriba el siguiente código en el archivo App.js.

import React, { Component } from 'react';
import "./styles.css";
class App extends Component {
  constructor() {
    super();
    this.state = {
      value: 0
    }
  }
  
  shouldComponentUpdate(prevProps, prevState) {
    if (prevState.value !== this.state.value) {
      return true;
    }
    else {
      return false;
    }
  }
  
  render() {
    console.log("Inside render");
    return (
  
      <div className="App">
        <h1>Component : {this.state.value}</h1>
        <button onClick={() => {
          this.setState({ value: this.state.value + 1 })
        }}>Update</button>
      </div>
    );
  }
}
  
export default App;

.App {
  font-family: sans-serif;
  text-align: center;
  width: 460px;
  background: green;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Arriba hay un ejemplo donde al hacer clic en el botón, el valor del estado cambia. Dentro de la función shouldComponentUpdate() estamos comprobando si nuestro valor actual de estado es diferente al anterior. Si es diferente, la función devuelve verdadero, lo que significa que el componente se volverá a representar. En la consola, podemos ver que con cada clic en el botón aparece el mensaje «renderizado interior» ya que el componente se vuelve a renderizar una y otra vez. En caso de que el valor actual del estado sea el mismo que antes, la función shouldComponentUpdate() devolverá falso y el componente no se volverá a procesar.

Importancia de shouldComponentUpdate():

• Ayuda a verificar si se requiere volver a renderizar los componentes o no. Si no se requiere volver a renderizar, shouldComponentUpdate no renderiza el componente. Por ejemplo, si queremos que nuestro componente no se represente en alguna condición específica, shouldComponentUpdate puede ser de gran utilidad.
• Ayuda a mejorar el rendimiento.
• Aumenta la capacidad de respuesta y la optimización del sitio web.