useState: El inicio de la gestión de estado en React

Al finalizar este tema

Comprenderá cómo crear y actualizar estados con useState, así como el principio por el cual se producen los re-renderizados.

No es posible con variables comunes

function Counter() {
  let count = 0;

  function handleClick() {
    count += 1;
    console.log(count); // 1, 2, 3... sube
  }

  return <button onClick={handleClick}>{count}</button>;
  // En pantalla siempre es 0
}

count aumenta, pero la pantalla no se actualiza. React no detecta los cambios en variables comunes. Para actualizar la pantalla, debes informar a React que "el estado ha cambiado".

useState

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

useState(0) devuelve dos elementos:

• count: el valor del estado actual
• setCount: la función para actualizar el estado

Al llamar a setCount, React vuelve a renderizar el componente. La pantalla se redibuja con el nuevo valor de count.

La actualización del estado es asíncrona

function handleClick() {
  setCount(count + 1);
  console.log(count); // ¡Aún el valor anterior!
}

Llamar a setCount no cambia count de inmediato. El nuevo valor se reflejará en el siguiente renderizado.

Al actualizar basándose en el valor anterior, se utiliza una actualización funcional:

setCount(prev => prev + 1);

prev recibe el valor más reciente. Es preciso incluso tras realizar llamadas consecutivas:

setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// count aumenta en 3

Estado de objetos y arreglos

const [user, setUser] = useState({ name: "Alice", age: 25 });

// Mal ejemplo: modificación directa
user.age = 26; // React no detecta el cambio
setUser(user); // No hay re-renderizado porque la referencia es la misma

// Buen ejemplo: crear un nuevo objeto
setUser({ ...user, age: 26 });

React verifica si la referencia ha cambiado. Si se modifica el objeto existente, la referencia sigue siendo la misma y no se detecta el cambio. Debe crear un nuevo objeto utilizando el operador spread.

Lo mismo ocurre con los arreglos:

const [items, setItems] = useState(["a", "b"]);

// Agregar
setItems([...items, "c"]);

// Eliminar
setItems(items.filter(item => item !== "b"));

// Modificar
setItems(items.map(item => item === "a" ? "A" : item));

No se utilizan métodos de mutación originales como push o splice.

Múltiples useState

const [name, setName] = useState("");
const [age, setAge] = useState(0);
const [isActive, setIsActive] = useState(false);

Los estados no relacionados se declaran por separado. Los valores que siempre cambian juntos pueden agruparse en un solo objeto.

Conceptos clave

useState agrega estado a los componentes de React y provoca un re-renderizado al llamar a setState. Dado que las actualizaciones de estado son asíncronas, para las actualizaciones basadas en el valor anterior, use la forma funcional (prev => ...). Para estados de objetos o arreglos, no debe modificar el original, sino crear uno nuevo.