Forzar la renderización de los componentes de React

1. Obligar a los componentes de React a volver a procesarse con los componentes de la clase
2. Obligar a los componentes de React a volver a procesarse con los componentes de la función

Por defecto, los componentes de React se activan para volver a renderizarse por los cambios en su state o props. La mayoría de las veces, si sigue las mejores prácticas de React, este comportamiento es más que suficiente para lograr los resultados deseados.

En algunos casos, el comportamiento predeterminado del marco no es suficiente y debe volver a renderizar el componente manualmente. Antes de hacerlo, revise cuidadosamente el código. Forzar una repetición es una opción viable solo en un número limitado de circunstancias.

Obligar a los componentes de React a volver a procesarse con los componentes de la clase

Cuando se usa correctamente, una llamada al método setState() de React Class Component siempre debería desencadenar una re-renderización. el bucle de vida shouldComponentUpdate() puede contener una lógica condicional que evita este comportamiento.

Si está llamando a setState() pero el componente no se actualiza, es posible que haya algún problema con su código. Asegúrese de tener una razón válida para utilizar el método forceUpdate().

this.forceUpdate()

Si su método render() se basa en datos fuera de state o props, y desea activar la repetición en función de los cambios en esos datos, puede utilizar el método forceUpdate().

Código de ejemplo:

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

En este caso, un cambio de state o props no activa la actualización. Es el método forceUpdate() el que lo hace.

Mejores prácticas

Los desarrolladores de React solo deberían usar forceUpdate() como último recurso. La función de render solo debería leer desde props y state. Siguiendo estas pautas, puede garantizar la simplicidad y eficiencia de sus componentes React.

No se recomienda utilizar el método forceUpdate() con frecuencia. Si tiene la costumbre de usarlo mucho, es posible que desee revisar su código y ver si se puede mejorar.

Obligar a los componentes de React a volver a procesarse con los componentes de la función

Los componentes de la función no incluyen el método forceUpdate(). Sin embargo, todavía es posible obligarlos a volver a renderizar usando los ganchos useState() o useReducer.

useState

Similar al método setState() de Class Components, el gancho useState() siempre activa una actualización, siempre que el objeto state actualizado tenga un valor diferente.

Puede crear un gancho personalizado que haga uso del gancho useState() para forzar una actualización. Aquí hay un código de muestra para dicho gancho reutilizable:

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

Como todos sabemos, el gancho useState() devuelve dos valores: el valor actual del state y su setter. En este caso, solo necesitamos el setter newState.

useReducer

Dado que el gancho useState utiliza internamente useReducer, puede usar este gancho directamente para crear una solución más elegante. La solución recomendada de React official documents usa useReducer también. Aquí hay una solución de muestra:

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

El gancho useReducer() devuelve el estado actual y la función de envío. En el ejemplo anterior, usamos la sintaxis [variableName, dispatchName] para almacenar estos valores.

En este ejemplo, llamar a un controlador handleChange() obligaría a su componente a actualizarse cada vez.

Los ganchos no están diseñados para usarse de esta manera. Intente utilizar estas soluciones para pruebas o casos atípicos.