El estado local pertenece a un único componente (o un subárbol pequeño) y no es necesario en otro lugar. El estado global se comparte entre muchos componentes, a menudo distantes, en toda la aplicación.
() {
[query, setQuery] = ();
;
}
El estado local vive dentro del componente (useState, ref, data()). Ejemplos: valores de entrada, si un desplegable está abierto, un estado hover, un borrador de formulario. Ningún otro componente se preocupa por ello.
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
El estado global son datos que muchos componentes no relacionados deben leer o actualizar consistentemente: el usuario autenticado, el tema, el carrito de compras, notificaciones de toda la aplicación. Vive en un Context, un store (Redux/Zustand/Pinia), o similar.
Ask: "How many components need this, and how far apart are they?"
One component (or parent+child) → LOCAL state
Many unrelated components / whole app → GLOBAL state
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);
// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
Hacer todo global añade boilerplate, acopla componentes y puede afectar el rendimiento (más re-renders). La mejor práctica es mantener el estado lo más local posible, y solo elevarlo a global cuando el intercambio de datos realmente lo requiera.
Elegir entre estado local y global es una de las decisiones de estado más importantes.
Mantener el estado local mantiene los componentes simples, autónomos y eficientes; recurrir al estado global solo cuando los datos se comparten realmente evita la complejidad innecesaria.
El anti-patrón frecuente — poner todo en un store global "por si acaso" — conduce a aplicaciones infladas y fuertemente acopladas.
La regla directriz: localiza por defecto, globaliza solo cuando el intercambio lo exige.