Reaccionar Volver a renderizar componentes en cambio de estado

1. Mantener el estado en React
2. Volver a renderizar en React

Una de las principales razones de la popularidad de React es su flexibilidad, eficiencia y la libertad que ofrece para crear aplicaciones web dinámicas. El estado es una de las innovaciones fundamentales de la biblioteca React.

Mantener el estado en React

Cada componente de React puede tener su objeto de estado interno, que almacena los valores modificados. Cada vez que cambien los valores de estado, las aplicaciones también se volverán a procesar.

La pregunta natural es, ¿qué tipo de valores debe contener el estado?

No hay límite en lo que puede almacenar en el estado. Puede ser cualquier tipo de datos (cadena, entero, matriz, objetos).

En la práctica, el estado se usa a menudo para almacenar los datos recibidos de la API y los valores que dependen de la entrada del usuario, por ejemplo, la configuración del tema y la autenticación. En el objeto de estado, podría tener una propiedad darkMode.

Luego, puede aplicar estilos condicionales para implementar la función Modo oscuro en su aplicación web. Cuando el valor de esta propiedad es false, su aplicación tendrá un fondo claro y un texto oscuro; si es true, tendrá fondo oscuro y texto blanco.

Volver a renderizar en React

React hace honor a su nombre, ya que los cambios de valor de estado activan la nueva representación de la aplicación. De forma predeterminada, cada vez que cambia el estado, todos los componentes se vuelven a renderizar.

A primera vista, este comportamiento predeterminado parece ineficiente. Es posible que tenga un componente con muchos elementos secundarios, y cambiar solo una variable de estado no debería volver a representar todos los componentes en el árbol.

En el mejor de los casos, React debería volver a renderizar solo los componentes que muestran el valor actualizado.

La cuestión es que, para todos los efectos, eso es lo que hace React. En Virtual DOM, una nueva representación de un estado o valor prop conduce a la representación de otros componentes en el árbol.

Sin embargo, estos renderizados se limitan al DOM virtual, que es solo una sombra del DOM real y, por lo tanto, los renderizados no consumen demasiados recursos.

En la etapa final, React compara Virtual DOM con Real DOM y actualiza solo las partes de Real DOM que son diferentes de Virtual DOM. De esta forma, React se asegura de que todos los cambios se reflejen en el DOM y, al mismo tiempo, se mantenga eficiente.

Reaccionar componentes volver a renderizar en cambio de estado

Los componentes de React se vuelven a renderizar cada vez que usas el método setState() (o el gancho useState()) para actualizar el estado.

Veamos el ejemplo en vivo:

import "./styles.css";
import { useState } from "react";
export default function App() {
  console.log("re-rendered");
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setText(e.target.value)} />
      <h1>You entered: </h1>
      <p>{text}</p>
    </div>
  );
}

Aquí tenemos una aplicación simple con un elemento <input>, uno <h1> y uno <p>. Configuramos una variable de estado, texto, que se actualiza cada vez que alguien ingresa el valor en la entrada de texto.

Vaya a demostración en vivo en CodeSandbox, donde se implementa este código. Si abre la consola, verá la salida de texto re-renderizado en la consola cada vez que ingresamos algo en el campo.

el método shouldComponentUpdate()

Ayuda a comprender lo que sucede debajo del capó y cómo React determina que el componente debe volver a renderizarse.

Cada componente tiene un método shouldComponentUpdate() que devuelve un valor booleano. Como sugiere el nombre, este método define los criterios de cuándo el componente debe y no debe volver a renderizarse.

De forma predeterminada, los criterios son estos: actualizaciones de componentes cada vez que recibe nuevos accesorios o cada vez que realiza cambios en el estado.

Por defecto, el método shouldComponent() tiene una definición amplia. Cada vez que el componente actual o principal recibe un nuevo valor prop o cambia el valor state, devuelve true.

Esto puede evitar errores y retrasos en la visualización de cambios significativos al omitir o volver a renderizar el componente.

Sin embargo, si está seguro de que puede seguir las pautas comunes de React para trabajar con valores de estado, por ejemplo, no mutarlos en su lugar, puede crear una definición personalizada shouldComponentUpdate().