Método ReactJS shouldComponentUpdate()

El método shouldComponentUpdate nos permite salir del complejo ciclo de vida de actualización de reacción para evitar llamarlo una y otra vez en cada renderizado. Solo actualiza el componente si los accesorios que se le pasan cambian.

El método shouldComponentUpdate se usa principalmente para optimizar el rendimiento y aumentar la capacidad de respuesta del sitio web, pero no confíe en él para evitar la representación, ya que puede generar errores.

Sintaxis:

shouldComponentUpdate(nextProps, nextState)

Valor devuelto: de forma predeterminada, devuelve verdadero y, si devuelve falso , no se invoca el método render() , componentWillUpdate() y componentDidUpdate() .

Ejemplo: en este ejemplo, vamos a crear una aplicación de contador que solo se muestra cuando se cambia el valor de sus accesorios.

Aplicación.js

import React, { useState } from "react";
import Counter1 from "./Counter1";
import Counter2 from "./Counter2";
  
  
const App = () => {
  
// Using useState hooks for defining state
  const [counter1, setCounter1] = useState(0);
  
  const increase1 = () => {
    setCounter1(counter1 + 1);
  };
  const [counter2, setCounter2] = useState(0);
  
  const increase2 = () => {
    setCounter2(counter2 + 1);
  };
    
  return (
    <div className="container">
      <div>
        <Counter1 value={counter1} onClick={increase1} />
      </div>
      <div>
        <Counter2 value={counter2} onClick={increase2} />
      </div>
    </div>
  );
};
  
export default App;

Sin usar el método shouldComponentUpdate():

• Contador1.js

  JavaScript

  import React, { Component } from "react";    class Counter1 extends Component {   render() {     console.log("Counter 1 is calling");     return (       <div>         <h2>Counter 1:</h2>         <h3>{this.props.value}</h3>         <button onClick={this.props.onClick}>Add</button>       </div>     );   } }    export default Counter1;

• contador2.js

  JavaScript

  import React, { Component } from "react";    class Counter2 extends Component {   render() {     console.log("Counter 2 is calling");     return (       <div>         <h2>Counter 2:</h2>         <h3>{this.props.value}</h3>         <button onClick={this.props.onClick}>Add</button>       </div>     );   } }    export default Counter2;

• Producción:
  

Con el método shouldComponentUpdate():

• Contador1.js

  JavaScript

  import React, { Component } from "react";    class Counter1 extends Component {   shouldComponentUpdate(nextProps) {     // Rendering the component only if      // passed props value is changed        if (nextProps.value !== this.props.value) {       return true;     } else {       return false;     }   }   render() {     console.log("Counter 1 is calling");     return (       <div>         <h2>Counter 1:</h2>         <h3>{this.props.value}</h3>         <button onClick={this.props.onClick}>Add</button>       </div>     );   } }    export default Counter1;

• contador2.js

  JavaScript

  import React, { Component } from "react";    class Counter2 extends Component {     shouldComponentUpdate (nextProps) {       // Rendering the component only if       // passed props value is changed          if (nextProps.value !== this.props.value) {         return true;       } else {         return false;       }     }   render() {     console.log("Counter 2 is calling");     return (       <div>         <h2>Counter 2:</h2>         <h3>{this.props.value}</h3>         <button onClick={this.props.onClick}>Add</button>       </div>     );   } }    export default Counter2;

• Producción: