Actualizar una página en React

1. Use el método reload() para actualizar una página en React manualmente
2. Actualice el estado del componente para actualizar una página en React

Una de las ventajas significativas de React es que no necesita actualizar la página para ver las actualizaciones más recientes. React actualiza automáticamente la vista cada vez que cambia el estado.

Aún así, a veces es necesario actualizar la página manualmente. Por ejemplo, una simple recarga puede corregir inconsistencias en el estado.

Otras veces, es posible que desee deshacer algunas acciones innecesarias. Veamos cómo puede actualizar manualmente la página en React, cualquiera que sea el motivo.

Use el método reload() para actualizar una página en React manualmente

La mayoría de las veces, queremos desencadenar un refresco manual en React después de que el usuario haga clic en un botón, un texto o algún otro elemento. Para ello, necesitaremos crear un manejador de eventos. Los navegadores proporcionan nativamente una interfaz window con un objeto location, que incluye el método reload().

Es un método bastante simple, como puede ver en el siguiente ejemplo. Solo toma un argumento, que se usa para especificar si el navegador debe o no recargar completamente el contenido de la página desde el servidor o solo el caché.

Tendremos que usar este método dentro de nuestro controlador de eventos para volver a cargar una página con éxito. Veamos un ejemplo:

class App extends Component {
  render() {
    return <button onClick={() => window.location.reload()}>Refresh</button>;
  }
}

Es un ejemplo básico de cómo actualizar la página manualmente en React. Recuerde, el controlador de eventos onClick debe establecerse igual a una definición de función, no a la llamada. De esta manera, solo se ejecuta cuando el usuario hace clic en el botón. Puedes experimentar con el código en playcode tú mismo.

Alternativamente, puede usar los métodos del bucle de vida para volver a cargar la página una vez montada. Los componentes funcionales no tienen métodos de bucle de vida, pero puede lograr el mismo resultado usando el enlace useEffect().

Actualice el estado del componente para actualizar una página en React

Los cambios en el estado local del componente activan automáticamente la actualización. Es la forma natural de manejar las actualizaciones de la página en React, por lo que está más alineado con las pautas oficiales de buenas prácticas de los creadores de React.

Si se construyen correctamente, las aplicaciones de React no necesitan actualizarse manualmente para cargar los cambios más recientes en el estado. Este proceso se activa automáticamente.

El propósito completo de tener un estado local es que cualquier cambio en el estado se refleje automáticamente. Veamos un ejemplo:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      textInput: ""
    }
  }
  render() {
    return <div>
            <input type="text" onChange={(e) => this.setState({textInput: e.target.value})} />
            <h1>{this.state.textInput}</h1> 
           </div>
  }
}

Es una demostración bastante simple de cómo los cambios de estado activan automáticamente la actualización de la página (también llamada volver a renderizar) en React. Iniciamos el estado con una propiedad textInput y actualizamos la propiedad cada vez que cambia el valor en el campo input.