¿Cómo forzar a ReactJS a volver a renderizar en cada llamada de setState?

Cuando el estado o las propiedades de un componente de React cambian, el componente se volverá a renderizar inmediatamente. Muchos componentes de la interfaz de usuario (UI) se vuelven a representar instantáneamente cuando el estado se actualiza desde algún lugar del código.

Si queremos renderizar el componente sin ningún cambio, podemos usar el método foceUpdate(). Cuando llamamos a forceUpdate(), volverá a renderizar el componente y omitirá el método shouldComponentUpdate().

El método shouldComponentUpdate() permite que su componente salga del ciclo de vida de actualización si no hay motivo para volver a renderizar.

Sintaxis:

this.forceUpdate()

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.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
class App extends React.Component {
  
  handleForceUpdate = () => {
    this.forceUpdate();
  };
  
  render() {
    return (
      <div>
        <h3>
         Example of forceUpdate() method to 
         show re-rendering <br></br>
         without changing state or props
        </strong>
        <button onClick={this.handleForceUpdate} >
          FORCE UPDATE
        </button>
        <h4>Number is : 
           {Math.floor(Math.random() * (100000 - 1 + 1)) + 1}
        </h4>
      </div>
    );
  }
}
  
export default App;

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: como podemos ver en el ejemplo anterior, el componente se vuelve a renderizar sin cambiar las propiedades o el estado debido a la llamada al método forceUpdate(). El número aleatorio se regenera cuando el componente se vuelve a renderizar.