Aprende a crear un store global con Zustand para compartir estado entre componentes sin boilerplate excesivo.
Cuando Context API empieza a crecer con demasiada lógica y providers, una librería de estado global ligera puede simplificar mucho la arquitectura.
Zustand ofrece un modelo minimalista: defines store con estado y acciones, y cada componente consume solo lo que necesita.
Su principal ventaja práctica es reducir boilerplate frente a soluciones más pesadas manteniendo buen rendimiento.
También permite escalar gradualmente: puedes empezar pequeño y añadir middleware o persistencia cuando el producto lo requiera.
Define estado + acciones en una sola función con `create`.
Cada acción modifica estado vía `set`, manteniendo la lógica centralizada.
Los componentes usan el hook del store para leer y actuar sin pasar props.
Esto reduce fricción cuando múltiples vistas dependen del mismo dato global.
Mismo estado compartido entre componentes distintos.
No metas todo en un único store gigante desde el primer día.
Aprende a crear un store global con Zustand para compartir estado entre componentes sin boilerplate excesivo.
Código del tema: Componentes, estado y render declarativo
Define estado + acciones en una sola función con `create`.
Cada acción modifica estado vía `set`, manteniendo la lógica centralizada.
Los componentes usan el hook del store para leer y actuar sin pasar props.
Esto reduce fricción cuando múltiples vistas dependen del mismo dato global.
Mismo estado compartido entre componentes distintos.
import { create } from 'zustand';
const useCounterStore = create((set) => ({
count: 0,
inc: () => set((s) => ({ count: s.count + 1 })),
dec: () => set((s) => ({ count: s.count - 1 }))
}));
function Counter() {
const { count, inc, dec } = useCounterStore();
return (
<div>
<button onClick={dec}>-</button>
<span>{count}</span>
<button onClick={inc}>+</button>
</div>
);
}No metas todo en un único store gigante desde el primer día.