Cómo forzar la actualización de un componente React

Introducción

En este artículo, le mostraremos cómo forzar la actualización de un componente en React.js. Más específicamente, daremos una breve introducción a los renderizados de React, mostraremos cómo forzar actualizaciones en componentes basados ​​en clases y cómo forzar actualizaciones en componentes funcionales.

Reaccionar Re-Renderizados

React se encarga automáticamente de volver a renderizar los componentes por usted, en la mayoría de los casos. La causa de esto puede basarse en cuándo se actualizaron las propiedades o el estado. Entonces, cuando cambia un estado o una propiedad, el componente se vuelve a renderizar. Pero, ¿qué sucede si su componente depende de otra cosa y no necesariamente de su estado o propiedad? En ese caso, es posible que deba forzar la actualización del componente, ya que es posible que React no haya detectado el cambio.

Echemos un vistazo a cómo usar esta actualización forzada en un componente React. Para mostrar esto, vamos a crear una aplicación simple con fines de demostración.

Note: Cubriremos algunos conceptos de React, por lo que es recomendable tener conocimientos básicos de React.

Forzar actualizaciones en componentes basados ​​en clases

El componente de clase tiene un método incorporado para volver a representar un componente, llamado forceUpdate(), que se utiliza para obligar a un componente a volver a renderizarse. Puedes leer más sobre el forceUpdate() método en React página web oficial.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: No es aconsejable depender de la actualización de componentes utilizando el forceUpdate() método. Cuando necesite este método, primero debe intentar analizar su código y averiguar si hay otra razón por la cual React no está actualizando el componente. Puede encontrar que un error está causando esto o que puede reestructurar su código de una manera que le permita a React volver a renderizar correctamente el componente por sí solo.

Aquí hay un ejemplo de cómo forzar una actualización en un componente basado en clases:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

Hay mucho más sucediendo dentro de este método de lo que parece. Por ejemplo, llamando forceUpdate() activa los métodos de ciclo de vida para los componentes secundarios también. Y como sabemos con React, actualizará el DOM solo si el marcado realmente ha cambiado.

Puede acceder al código en vivo aquí.

Forzar actualizaciones en componentes funcionales

Los componentes funcionales no tienen un método incorporado para volver a representar un componente como lo hacen sus contrapartes basadas en clases. Esto significa que no tenemos la forceUpdate() método disponible para nosotros. Sin embargo, recuerde que en React los componentes normalmente se vuelven a renderizar debido a cambios de estado o accesorios. Usando esto, podemos lograr formas de forzar la actualización.

A partir de v16.8+, React tiene un concepto llamado Hooks que se puede usar en componentes funcionales para actualizar el estado, realizar efectos secundarios, etc. Usaremos estos hooks a nuestro favor para obtener un componente para volver a renderizar.

Aquí hay algunos ejemplos de cómo forzar una actualización en un componente funcional:

Usando el useReducer Gancho.

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

Un reductor en React generalmente se usa cuando tiene acciones y lógica de estado complejas. Aquí lo usamos simplemente para activar la actualización actualizando una variable de estado ficticia, x. El estado debe cambiar para activar la actualización, por lo que se incrementa en cada llamada.

Ingrese al useState Gancho.

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

La idea detrás de este tipo de actualización forzada es muy similar a useReducer en que estamos constantemente actualizando el estado para forzar el cambio. En lugar de incrementar un contador, como hicimos en el último método, aquí simplemente alternamos un valor booleano para que se niegue en cada llamada.

Usando el useState y useCallback manos

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Una vez más, esta estrategia funciona cambiando el estado. En este caso, aunque técnicamente no estamos cambiando el propuesta de del estado, nosotros en enviándole un nuevo objeto, que React considera nuevo ya que no realiza comprobaciones de igualdad "profundas" en el estado.

Como puede ver, hay varias maneras de lograr lo mismo aquí. Tenga en cuenta que todos estos son técnicamente anti-patrones y deben evitarse cuando sea posible. Pero si no puede resolver el problema subyacente y necesita forzar la actualización de un componente, cualquiera de los métodos que mostramos aquí debería funcionar.

Conclusión

En este artículo hemos visto cómo forzar actualizaciones en los componentes de React. También vimos cómo se puede lograr esto tanto en componentes funcionales como basados ​​en clases. Si bien no es necesariamente una buena práctica, es útil comprender cómo funciona en caso de que necesitemos usarlo en casos especiales.