Frontend Academy · Lección

Hook useState: estado y renderizados

Llame a useState para añadir estado local a un componente, actualice el estado con la función setter y comprenda cuándo y por qué React vuelve a renderizar.

Hook useState: estado y renderizados es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es el estado?

El estado son datos que cambian con el tiempo y deben hacer que la interfaz de usuario se actualice cuando cambian. A diferencia de las variables normales, los cambios de estado hacen que React vuelva a renderizar el componente con el nuevo valor.

Sintaxis de useState

useState(initialValue) devuelve una tupla: el valor actual y una función setter. Desestructúrela inmediatamente.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

TypeScript: tipar useState

TypeScript infiere el tipo a partir del valor inicial. Cuando el valor inicial es ambiguo (null o un array vacío), añada un parámetro de tipo explícito.

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

Volver a renderizar al cambiar el estado

Llamar a la función setter programa un nuevo renderizado. React vuelve a llamar a la función del componente con el nuevo valor de estado. El JSX devuelto reemplaza el renderizado anterior en el DOM virtual.

Las actualizaciones de estado son asíncronas

Las actualizaciones de estado se agrupan y se aplican antes del siguiente renderizado, no inmediatamente. No lea el estado actualizado en el mismo controlador de eventos: el nuevo valor no está disponible hasta el siguiente renderizado.

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

Actualizaciones funcionales

Cuando el nuevo estado depende del estado anterior, utilice la forma funcional del setter. Esto evita errores causados por cierres obsoletos.

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

Estado con objetos

Cuando el estado es un objeto, cree siempre un objeto nuevo; no modifique el existente. React compara por referencia, por lo que las mutaciones no activan nuevos renderizados.

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

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

Múltiples variables de estado

Llame a useState varias veces para las variables de estado independientes. Esto es más limpio que utilizar un único objeto de estado grande cuando los valores no cambian conjuntamente.

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

Inicialización diferida

Si el estado inicial requiere un cálculo costoso, pase una función a useState. Esta se ejecuta solo en el primer renderizado, no en cada nuevo renderizado.

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

Cuándo no utilizar el estado

No todas las variables necesitan ser estado. Los valores derivados (total = items.reduce(…)) deben calcularse durante el renderizado, no almacenarse en el estado. El estado derivado de las props suele ser una señal de sobreingeniería.

Elevación del estado

Cuando dos componentes hermanos necesitan compartir estado, elévelo a su ancestro común y páselo como props. Este es el patrón fundamental de gestión de estado de React antes de recurrir a context o a un store.

Comprobación rápida

¿Por qué debe utilizar la forma funcional setCount(prev => prev + 1) en lugar de setCount(count + 1)?

Recapitulación: useState

useState devuelve [value, setter]. El valor inicial establece el tipo (o utilice un genérico explícito). El setter activa un nuevo renderizado. Utilice actualizaciones funcionales cuando el nuevo estado dependa del anterior. En el caso de objetos, extiéndalos siempre para crear objetos nuevos; nunca los modifique. Utilice la inicialización diferida para cálculos costosos. Eleve el estado a los ancestros comunes cuando los hermanos necesiten compartirlo.

Preguntas frecuentes

¿La lección «Hook useState: estado y renderizados» es gratis?

Sí — el texto completo de «Hook useState: estado y renderizados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Hook useState: estado y renderizados»?

Llame a useState para añadir estado local a un componente, actualice el estado con la función setter y comprenda cuándo y por qué React vuelve a renderizar. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Hook useState: estado y renderizados»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy