¿Cómo volver a renderizar un componente sin usar el método setState() en ReactJS?

En React , para volver a renderizar un componente basado en clases con un estado actualizado, generalmente usamos el método setState() . Sin embargo, podemos volver a renderizar un componente de dos maneras diferentes: 

• Al cambiar accesorios

• Usando el método forceUpdate()

Creando la aplicación React:

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

npx create-react-app nombre de carpeta

• 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:

nombre de carpeta de cd

Método 1 (cambiando accesorios): si pasamos el estado del componente principal como accesorio al secundario y llamamos a setState en el principal, se volverá a renderizar el componente secundario a medida que se cambian sus accesorios.

El siguiente código demuestra lo mismo. 

import React, { Component } from "react";
  
class App extends Component {
  constructor(props) {
    super(props);
  
    // Set initial state of parent
    this.state = { category: "Coder" };
  
    // Binding this keyword
    this.updateState = this.updateState.bind(this);
  }
  
  updateState() {
    // Changing state
    this.setState({ category: "Geek" });
  }
  
  render() {
    return (
      <div>
        <Child category={this.state.category} />
        <button onClick={this.updateState}>Click me!</button>
      </div>
    );
  }
}
  
class Child extends Component {
  render() {
    return (
      <div>
        <p>Hi {this.props.category}!</p>
      </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:

inicio de npm

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

volver a renderizar el componente secundario cambiando los accesorios

Método 2: Usar el método forceUpdate() obligará a volver a renderizar el componente. 

Precaución: aunque forceUpdate resuelve nuestro problema, se recomienda usar setState o cambiar accesorios para volver a renderizar un componente, ya que el método forceUpdate omite el ciclo de vida adecuado de renderizado de un componente. Vea esto para más detalles.

El siguiente código demuestra el uso de forceUpdate al generar un número aleatorio entre 1 y 10 al forzar una nueva representación: 

import React, { Component } from "react";
  
class App extends Component {
  reRender = () => {
  
    // force update
    this.forceUpdate();
  };
  
  render() {
    return (
      <div>
        <h2>Random Number Generator</h2>
        <p>Your Number: {Math.floor(Math.random() * 10) + 1}</p>
        <button onClick={this.reRender}>Generate!</button>
      </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:

inicio de npm

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

generar un número aleatorio por el método forceUpdate

Nota:

Para componentes funcionales , deberíamos usar el enlace useState para volver a renderizar un componente. 

Referencias: https://reactjs.org/docs/react-component.html#forceupdate