useState: qué es, el hook de estado y sintaxis en React

Qué es useState en React

useState es un Hook fundamental de React, añadido en la versión 16.8, que permite a los componentes funcionales almacenar y modificar el estado local. Antes de la introducción de los Hooks, el estado solo podía usarse en componentes de clase a través de this.state y this.setState, lo que hacía que los componentes funcionales fueran puramente de presentación. useState eliminó esta limitación, permitiendo escribir aplicaciones completas usando componentes funcionales.

El Hook toma un argumento — el valor inicial del estado — y devuelve un array de dos elementos. El primer elemento es el valor actual del estado, y el segundo es una función para actualizarlo. React garantiza que la función setter es estable y no cambia entre renderizados, lo que permite pasarla de forma segura a componentes hijos y usarla en clausuras.

Según la Encuesta de Uso de React DevTools (2024), useState se usa en el 96% de las aplicaciones React, lo que lo convierte en el Hook más común del ecosistema. Incluso en aplicaciones que usan estado global mediante Redux o Zustand, el estado local a través de useState sigue siendo el mecanismo principal para gestionar el estado de la UI — modales abiertos, valores de campos de entrada, pestañas activas.

import { useState } from 'react';

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

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

Cómo funciona useState

El mecanismo interno de useState se basa en el sistema de nodos fiber de React. Cada componente en React está representado por un nodo fiber que almacena una lista enlazada de Hooks asociados con él. Cuando un componente llama a useState, React crea un nuevo nodo en esta lista y almacena en él el valor actual del estado y una referencia a la cola de actualizaciones.

Cuando se llama a la función setter, React no actualiza el estado inmediatamente. En su lugar, coloca la actualización en una cola de estado pendiente, programa un re-renderizado del componente, y solo durante el siguiente renderizado calcula el nuevo estado basándose en el anterior y las actualizaciones aplicadas. Esto garantiza el agrupamiento en lotes — si llamas al setter tres veces en un mismo manejador de evento, React las agrupa en un único re-renderizado.

Según el Grupo de Trabajo de React 18 — Equipo de React (2024), el agrupamiento automático se amplió en React 18: las actualizaciones de estado ahora se agrupan no solo en manejadores de eventos, sino también en setTimeout, callbacks de Promise y manejadores de eventos nativos. Esto proporcionó una mejora de rendimiento de hasta el 30% en escenarios con múltiples actualizaciones de estado.

Actualización Funcional del Estado

Cuando el nuevo estado depende del anterior, utiliza la forma funcional del setter: setCount(prev => prev + 1). React pasa el valor real del estado en el momento de la actualización a la función, garantizando la corrección incluso con actualizaciones agrupadas. Sin la forma funcional, setCount(count + 1) podría usar un valor obsoleto si se llama varias veces seguidas.

// Inicialización perezosa — se ejecuta solo una vez
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

Sintaxis de useState: Declaración y Actualización

La sintaxis básica de useState es extremadamente concisa: const [state, setState] = useState(initialValue). El valor inicial solo se usa durante el primer renderizado; en renderizados posteriores, React lo ignora y devuelve el valor actual guardado. Si el cálculo inicial requiere operaciones costosas, pasa una función inicializadora: useState(() => computeExpensiveInitial()).

La inicialización perezosa es especialmente importante cuando el valor inicial proviene de localStorage, transformación compleja de datos o análisis de parámetros de URL. React llama a la función inicializadora solo una vez — al montar el componente, lo que ahorra recursos en renderizados posteriores. Sin la inicialización perezosa, la expresión costosa se evaluaría en cada renderizado, incluso si se ignora su resultado.

// Estado de objeto — crear nueva referencia
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState con Diferentes Tipos de Datos

useState funciona igual de bien con primitivos (números, cadenas, booleanos) y tipos de referencia (arrays, objetos). Sin embargo, hay una diferencia importante: para los primitivos, React detecta cambios por valor; para objetos y arrays, por referencia. Mutar un objeto existente sin crear uno nuevo no provocará un re-renderizado porque la referencia sigue siendo la misma.

Al trabajar con objetos y arrays, crea siempre una nueva copia con los datos modificados. Para objetos, usa la sintaxis de propagación: setUser(prev => ({...prev, name: newName})). Para arrays, usa métodos que devuelvan un nuevo array: filter, map, concat, o sintaxis de propagación para añadir elementos. Los métodos de mutación como push, pop, splice no funcionarán — React los ignorará porque la referencia del array no ha cambiado.

// ✅ Correcto: hooks en el nivel superior
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

Reglas para el Uso de Hooks con useState

Como todos los Hooks de React, useState sigue dos reglas. Primera: llama a los Hooks solo en el nivel superior de tu componente — no los coloques dentro de condiciones, bucles o funciones anidadas. Esto garantiza que los Hooks se llamen en el mismo orden en cada renderizado, lo que es crítico para la lista enlazada interna de React.

La segunda regla: llama a los Hooks solo desde componentes funcionales de React o Hooks personalizados. No llames a useState desde funciones normales, callbacks o componentes de clase. Violar estas reglas provoca el error Invalid hook call, que React detecta en tiempo de ejecución.

• No en condiciones — if (flag) { useState(0) } viola el orden de las llamadas a Hooks.
• No en bucles — for (...) { useState(0) } hace impredecible el orden.
• No en callbacks — useEffect(() => { useState(0) }, []) rompe la lista enlazada.

// ❌ Problema de cierre obsoleto
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Solucionado con actualización funcional
}

// ¡count está obsoleto!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

Errores Comunes con useState

El error más común es la mutación directa de objetos y arrays en lugar de crear nuevas referencias. Los desarrolladores están acostumbrados al estilo mutable de los componentes de clase, donde this.state.user.name = ‘Nuevo Nombre’ funcionaba (aunque tampoco se recomendaba). En componentes funcionales, dicha mutación simplemente se ignora: React no ve un cambio de referencia y no re-renderiza el componente.

• Mutación de objeto — user.name = ‘Nuevo’ en lugar de setUser({...user, name: ‘Nuevo’}).
• Cierre obsoleto — usar un valor desactualizado en el setter sin la forma funcional.
• Re-renderizados extra — llamar al setter con el mismo valor (React 18 aún realiza un renderizado para primitivos).
• Reinicio de estado — actualizar involuntariamente la prop key de un componente, haciendo que se monte de nuevo.

El problema del cierre obsoleto ocurre cuando un callback pasado a useEffect o un manejador de evento captura un valor de estado desactualizado del cierre en el momento en que se creó el callback. La solución es usar la forma funcional del setter o incluir los valores necesarios en el array de dependencias de useEffect. Según la Documentación de React — Preguntas Frecuentes sobre Hooks (2025), los cierres obsoletos son la segunda causa más común de errores en Hooks después de los arrays de dependencias incorrectos.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);