Qué son los estados en React: guía práctica para entenderlos y utilizarlos

Tiempo de lectura: 2 minutos

Cuando empiezas a trabajar con React, uno de los conceptos más importantes que debes aprender es el estado (state). El estado permite que los componentes sean dinámicos, interactivos y capaces de responder a acciones del usuario.

En este tutorial aprenderás qué es el estado, para qué sirve y cómo usarlo correctamente.

Qué es el estado en React

El estado es un objeto que almacena información que puede cambiar durante la vida de un componente. Cada vez que el estado cambia, React vuelve a renderizar el componente para mostrar los nuevos datos en la interfaz.

Piensa en el estado como la memoria interna de un componente. Sirve para guardar datos que pueden modificarse con el tiempo, como:

• Contadores
• Formularios
• Datos obtenidos de una API
• Elementos seleccionados por el usuario
• Visibilidad de componentes

Diferencia entre props y estado

Antes de continuar, es importante entender la diferencia entre props y estado.

Las props son datos que un componente recibe desde su componente padre. Son inmutables, lo que significa que el componente no debe modificarlas.

El estado, en cambio, es interno del componente y sí puede modificarse. Es gestionado por el propio componente.

Cómo usar el estado con useState

En React moderno, el estado se gestiona normalmente con el hook useState. Este hook permite añadir estado a componentes funcionales.

Para usarlo, primero debes importarlo desde React:

import { useState } from "react";

Después, puedes crear un estado dentro del componente:

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

  return (
    <div>
      <p>Valor actual: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Cómo funciona useState

La función useState devuelve un array con dos elementos:

1. El valor actual del estado.
2. Una función para actualizar ese estado.

En el ejemplo anterior:

• contador almacena el valor actual.
• setContador es la función que permite modificar ese valor.
• useState(0) define el valor inicial del estado.

Cada vez que se llama a setContador, React vuelve a renderizar el componente con el nuevo valor.

Actualizando el estado correctamente

El estado nunca debe modificarse directamente. Esto es incorrecto:

contador = contador + 1;

Siempre debes usar la función actualizadora:

setContador(contador + 1);

También puedes actualizar el estado utilizando una función, lo que es recomendable cuando el nuevo valor depende del anterior:

setContador(prev => prev + 1);

Usar múltiples estados en un componente

Puedes declarar tantos estados como necesites dentro de un mismo componente.

function Usuario() {
  const [nombre, setNombre] = useState("");
  const [edad, setEdad] = useState(0);

  return (
    <div>
      <input
        placeholder="Nombre"
        onChange={(e) => setNombre(e.target.value)}
      />

      <input
        placeholder="Edad"
        type="number"
        onChange={(e) => setEdad(Number(e.target.value))}
      />

      <p>{nombre} tiene {edad} años</p>
    </div>
  );
}

Estados con objetos

El estado también puede almacenar objetos o arrays. En estos casos es importante crear una copia del objeto al actualizarlo.

const [usuario, setUsuario] = useState({
  nombre: "",
  edad: 0
});

Actualizar el estado correctamente:

setUsuario({
  ...usuario,
  nombre: "Ismael"
});

El operador spread permite copiar el estado anterior antes de modificar una propiedad.

Cuándo usar estado

Debes usar estado cuando los datos:

• Cambian durante la interacción del usuario.
• Afectan a lo que se muestra en la interfaz.
• Necesitan provocar un re-render del componente.

Si un dato no cambia o no afecta al renderizado, normalmente no necesita estar en el estado.