Estado con useState | Curso de React

¿Qué es el estado?

Los props son datos que llegan de afuera y no cambian. Pero una interfaz real necesita datos que cambian con el tiempo: el contador de "me gusta", lo que el usuario escribió en un campo, si un menú está abierto o cerrado. A esos datos cambiantes se les llama estado (en inglés, state).

Para manejar estado en un componente, React nos da un hook llamado useState.

💡

Un hook es una función especial de React (su nombre empieza con use) que te deja "engancharte" a funcionalidades de React, como el estado, dentro de un componente de función.

useState: la sintaxis

useState recibe el valor inicial y devuelve un array con dos elementos:

El valor actual del estado.
Una función para actualizarlo (convención: se llama set + nombre).

import { useState } from "react";

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

  return (
    <div>
      <p>Llevas {contador} clics</p>
      <button onClick={() => setContador(contador + 1)}>Sumar 1</button>
    </div>
  );
}

contador vale 0 al principio (el valor inicial que le dimos a useState).
Cada vez que haces clic, setContador(contador + 1) actualiza el estado.
React redibuja el componente con el nuevo valor y la pantalla se actualiza.

Lo que pasa cuando cambias el estado

Este es el ciclo que hace que todo funcione:

El usuario dispara un evento (un clic, una tecla...).
Llamas a la función set con el nuevo valor.
React guarda el nuevo estado y vuelve a ejecutar el componente.
El JSX ahora muestra el valor nuevo.

Fíjate en algo importante: el estado no se modifica "a mano" asignando contador = 5. Solo cambia a través de la función que te dio useState. Esa es la forma correcta de decirle a React "actualízame".

📌

Nunca hagas contador = 5 directamente. React necesita que uses setContador(5) para enterarse del cambio y redibujar. Si asignas directo, la pantalla no se actualiza.

Estado con texto (el caso más común)

El caso más frecuente de estado es leer lo que el usuario escribe en un campo de texto. Para eso se usa el evento onChange:

function Formulario() {
  const [nombre, setNombre] = useState("");

  return (
    <div>
      <input
        type="text"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Escribe tu nombre"
      />
      <p>Hola, {nombre || "escribe algo arriba"} 👋</p>
    </div>
  );
}

Aquí el campo input es controlado: su value viene del estado y su cambio va de vuelta al estado con setNombre. Es un patrón que verás en casi todas las apps de React.

¿Cuándo usar estado y cuándo no?

Una buena regla: no dupliques estado. Solo guarda en estado lo que de verdad cambia y afecta lo que se muestra. Si un valor se puede calcular a partir de otros datos del estado, calcúlalo en vez de guardarlo aparte.

// ❌ Estado duplicado e innecesario
const [total, setTotal] = useState(0);
// ...más código que también cambia "cantidad"...

// ✅ Calcula lo derivado sobre la marcha
const total = cantidad * precioUnitario;

Para recordar

El estado son los datos que cambian con el tiempo y hacen reaccionar a la interfaz.
useState(valorInicial) devuelve el valor actual y una función set para actualizarlo.
Cambia el estado solo a través de la función set; nunca asignes directo.
Usa onChange + estado para campos de texto controlados.
No dupliques estado: calcula los valores derivados.