Zustand

Instala Zustand, crea un store con create y consúmelo en cualquier componente sin providers ni envoltorios de context.

Diseña stores con acciones colocalizadas, valores derivados (calculados) y una separación clara entre state y comportamiento. Mantén los stores enfocados en un único dominio.

Usa funciones selector con useStore(selector) para suscribirte a slices específicos del state. Los componentes solo se re-renderizan cuando cambia el valor seleccionado, evitando

Define funciones async como acciones del store. Usa set para gestionar los estados de carga y error junto con la operación async. No se necesita middleware especial.

Divide stores grandes en slices enfocados y luego combínalos en un solo store. Cada slice define su propio state y acciones de forma independiente.

Zustand incluye varios middleware integrados: persist para almacenamiento, devtools para Redux DevTools, immer para actualizaciones inmutables y subscribeWithSelector para suscripciones granulares.

Usa el middleware persist para guardar y restaurar automáticamente el state del store en localStorage, sessionStorage o cualquier motor de almacenamiento personalizado.

Usa el middleware immer para escribir actualizaciones de state con estilo mutable que producen state inmutable por debajo. Esto elimina el spread manual de objetos para actualizaciones anidadas.

Tipa los stores de Zustand pasando una interfaz a create<State>(). Usa StateCreator para slices y el tipado de middleware. El soporte de TypeScript de Zustand ofrece inferencia completa

Decide cuándo usar React Context y cuándo usar Zustand. Context funciona para state de baja frecuencia, como temas. Zustand destaca para state de alta frecuencia con muchos consumidores que necesita re-renderizado selectivo.

En Next.js App Router, los stores de Zustand son singletons que persisten entre solicitudes en el servidor. Crea instancias de store por solicitud usando createStore + Context

Prueba stores de Zustand restableciendo el state entre tests, usando getState() y setState() para aserciones directas, y simulando stores en tests de componentes.

Envuelve tu store con el middleware devtools para conectarte a la extensión de navegador Redux DevTools. Inspecciona el state, rastrea acciones y usa depuración con viaje en el tiempo.