Los componentes en React se volverán a renderizar solo si el estado del componente o los accesorios que se le pasaron cambian, pero si necesitamos volver a renderizar el componente si algunos datos cambian, entonces usaremos el método forceUpdate() de React. Llamar a forceUpdate() forzará a volver a renderizar el componente y, por lo tanto, llamará al método render() del componente omitiendo el método shouldComponentUpdate().
Sugerencia: normalmente, evite todos los usos de forceUpdate() y solo lea desde this.props y this.state en render().
Sintaxis:
component.forceUpdate(callback)
Si bien ciertamente hay algunos casos de uso para usar el método forceUpdate(), es mejor usar ganchos, accesorios, estado y contexto para volver a representar el componente cuando lo necesite.
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app functiondemo
Paso 2: después de crear la carpeta de su proyecto, es decir, functiondemo, muévase a ella usando el siguiente comando:
cd functiondemo
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Ejemplo: en este ejemplo, vamos a crear una aplicación React que vuelve a renderizar el componente cuando se hace clic en el botón llamando al método forceUpdate().
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.
Javascript
import React from 'react';
class App extends React.Component {
reRender = () => {
// calling the forceUpdate() method
this.forceUpdate();
};
render() {
console.log('Component is re-rendered');
return (
<div>
<h2>GeeksForGeeks</h2>
<button onClick={this.reRender}>Click To Re-Render</button>
</div>
);
}
}
export default App;
Nota: Puede aplicar su propio estilo a la aplicación.
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
