Zustand

Qué es

Zustand es una librería ligera de gestión de estado para React, creada por el colectivo Poimandres (pmndrs), los mismos detrás de React Three Fiber y Jotai. Está escrita en TypeScript y basa su API en un hook (create) que genera un store, sin necesidad de envolver la aplicación en proveedores ni de usar la Context API. Su nombre significa “estado” en alemán y su filosofía es reducir el código repetitivo al mínimo.

Para qué sirve

• Centralizar el estado global de una aplicación React (sesión de usuario, carrito, preferencias, etc.) sin Redux ni reducers.
• Suscribir componentes solo a las porciones del estado que usan mediante selectores, evitando renderizados innecesarios.
• Compartir y mutar estado entre componentes lejanos sin “prop drilling” ni árboles de contextos anidados.
• Usar estado también fuera de React (lógica vanilla, tests, servicios) gracias a su store independiente del framework.
• Ampliar el store con middleware: persistencia en localStorage, integración con Redux DevTools o mutaciones inmutables con Immer.

Cuándo usarlo

Encaja cuando necesitas estado global compartido y la Context API se queda corta o provoca re-renderizados excesivos, pero Redux te parece demasiado pesado. Es ideal para proyectos pequeños y medianos que quieren algo simple y para grandes que necesitan rendimiento con selectores finos. Como alternativas, Redux Toolkit ofrece más estructura y herramientas para equipos grandes, y Jotai (del mismo grupo) propone un enfoque atómico si prefieres dividir el estado en piezas pequeñas.

Ejemplo

Instalación:

npm install zustand

Definición y uso de un store:

import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

function BearCounter() {
  // Selector: el componente solo se re-renderiza si cambia "bears"
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} osos por aquí...</h1>;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>Añadir oso</button>;
}

Puntos clave

• API mínima basada en un único hook create, sin proveedores ni boilerplate.
• Bundle muy pequeño y rendimiento alto gracias a la suscripción por selectores.
• Escrita en TypeScript, con tipado de primera clase.
• Middleware oficial para persistencia, Redux DevTools e Immer.
• Funciona dentro y fuera de React, lo que facilita los tests y la lógica desacoplada.

Ten en cuenta

Zustand no impone una estructura, así que en proyectos grandes conviene acordar convenciones (organización de stores, separación de acciones) para no acabar con estado desordenado. No incluye, de serie, herramientas tan completas como las de Redux Toolkit para casos muy complejos. Si trabajas con estado asíncrono pesado de servidor (caché, revalidación), suele combinarse con librerías como React Query o SWR en lugar de gestionarlo todo en el store. El proyecto está activamente mantenido (versión 5 estable).