Intermedioreact
Gestión de Estado Global Moderna con Zustand
Gestiona estado complejo en aplicaciones React sin la sobrecarga ni el boilerplate de Redux tradicional.
¿Por qué Zustand?
Zustand es una librería minimalista basada en hooks. No requiere envolver tu aplicación en Providers context (evitando re-renders innecesarios en componentes no suscritos) y su configuración toma menos de 10 líneas de código.
typescript
1import { create } from 'zustand';
2
3interface CarritoState {
4 items: string[];
5 agregarItem: (item: string) => void;
6 vaciarCarrito: () => void;
7}
8
9export const useCarritoStore = create<CarritoState>((set) => ({
10 items: [],
11 agregarItem: (item) => set((state) => ({ items: [...state.items, item] })),
12 vaciarCarrito: () => set({ items: [] }),
13}));Suscripción atómica mediante selectores
Para garantizar el máximo rendimiento, los componentes deben suscribirse únicamente a la porción de estado que necesitan mediante un selector. Así, si otra propiedad cambia, el componente no se volverá a renderizar.
jsx
1function ContadorItems() {
2 // Solo se re-renderiza si la longitud de "items" cambia
3 const total = useCarritoStore((state) => state.items.length);
4 return <span className="badge">{total} productos</span>;
5}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output