Gestionar el estado de un componente React con useState

Añade y gestiona variables de estado a un componente funcional de React con el hook useState.

En un componente funcional de React, el estado representa aquellos valores que pueden cambiar con el tiempo y que afectan la apariencia o el comportamiento del componente. Para gestionar estos cambios, se puede utilizar el hook useState, que permite almacenar y actualizar valores de manera reactiva. Cuando un valor almacenado en el estado se modifica, React vuelve a renderizar el componente para reflejar esos cambios en la interfaz de usuario.

Cómo usar el hook useState

Veamos un ejemplo práctico de cómo utilizar useState para crear un contador simple:

import { useState } from "react";

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
      <button onClick={() => setContador(contador - 1)}>Decrementar</button>
      <button onClick={() => setContador(0)}>Reiniciar</button>
    </div>
  );
}

export default Contador;

useState(0): Inicializa la variable de estado con el valor especificado 0. En este ejemplo es un número entero, pero podría ser cualquier objeto JavaScript.
contador: Es el valor actual del contador.
setContador: Es la función que permite actualizar el contador pasándole por parámetro el nuevo valor.

Cómo se actualiza el estado

Podemos actualizar el estado de dos maneras:

Con un nuevo valor:
```
setContador(nuevoValor);
```
Con una función que usa el estado previo:
```
setContador(prevEstado => prevEstado + 1);
```
Esta opción es más segura cuando la actualización del estado depende de su valor anterior.

Qué pasa cuando se actualiza el estado

Cada vez que se llama al método setContador del ejemplo, el estado cambia y React vuelve a renderizar el componente para reflejar los cambios en la interfaz. Es importante tener en cuenta que:

Si el estado no cambia, React no vuelve a renderizar el componente.
React combina varias actualizaciones del estado en una sola renderización para optimizar el rendimiento.
El nuevo estado no se refleja inmediatamente en la variable, ya que React maneja los estados de forma asincrónica.

Buenas prácticas al trabajar con el estado en React

Para obtener el máximo beneficio de useState() es importante seguir las buenas prácticas:

Usar funciones de actualización cuando el nuevo estado depende del anterior.
Evitar modificar directamente el estado. Siempre usar setState para cambiarlo.
Mantener los estados simples y lo más específicos posible.
No abusar de los estados globales. Siempre que sea posible, mantener el estado en el componente que realmente lo necesita.
Dividir componentes. Si un componente gestiona demasiados estados, puede ser buena idea dividirlo en subcomponentes.

Conclusión

El hook useState es una herramienta esencial para gestionar valores que cambian en los componentes funcionales de React. Su función principal es permitir actualizaciones dinámicas en la interfaz de usuario mediante setState, lo que provoca un nuevo renderizado. Para garantizar un rendimiento óptimo y un código claro, es fundamental seguir buenas prácticas, como evitar la modificación directa del estado y utilizar funciones de actualización cuando sea necesario. React gestiona el estado de manera eficiente, lo que facilita la creación de interfaces dinámicas y reactivas.