Jotai frente a Zustand y Context: cuándo usar cada uno

React Context es excelente para valores globales que cambian con poca frecuencia: el tema actual, la configuración regional del usuario, el estado de autenticación o los tokens del sistema de diseño. Estos valores se establecen una vez y rara vez se modifican durante una sesión.

La API está integrada en React, no requiere dependencias y comunica claramente al equipo que «este valor se comparte globalmente».

Cuando cambia el objeto de valor del contexto, aunque solo sea uno de sus campos, todos los consumidores se vuelven a renderizar. Esto es aceptable para una configuración global estable, pero resulta catastrófico para estados de alta frecuencia, como los campos de formulario o las marcas de animación de la interfaz.

Dividir los contextos en partes más pequeñas mitiga parcialmente el problema, pero el patrón se vuelve difícil de manejar a gran escala.

Zustand destaca en el estado global de la aplicación que cambia moderadamente: preferencias del usuario, carrito de compras, historial de navegación o estado de un asistente de varios pasos. Sus suscripciones basadas en selectores evitan re-renderizados causados por partes del estado no relacionadas.

El modelo basado en un almacén resulta familiar para los usuarios de Redux y centraliza el estado relacionado en un único lugar.

Los almacenes de Zustand exportan un hook useBoundStore. Pase un selector: useStore(state => state.cart) para suscribirse únicamente a la parte cart. Los componentes que utilizan selectores distintos son independientes; el componente que usa el selector de cart no se vuelve a renderizar cuando cambia el nombre del usuario.

Esto proporciona a Zustand una eficiencia por parte del estado similar a la de Jotai, con una API más imperativa.

Jotai es ideal para estados reactivos de grano fino en los que muchos valores pequeños e independientes cambian con frecuencia: valores individuales de campos de formulario, marcas de selección por fila, estados de alternancia de la interfaz o suscripciones a datos en tiempo real.

Su modelo de un átomo por valor resulta natural cuando distintas partes del árbol de componentes necesitan partes del estado completamente diferentes.

El paquete de Jotai es más pequeño que el de Zustand porque ofrece menos funcionalidades (no incluye un sistema de middleware ni herramientas de desarrollo integradas). La API de Jotai se parece mucho a useState (useAtom devuelve [value, setter]), lo que reduce la curva de aprendizaje para los desarrolladores de React.

La API de Zustand se parece más a Redux: defina un almacén, exporte un hook y utilice selectores. Ambas bibliotecas ofrecen una excelente compatibilidad con TypeScript.

Tanto Jotai como Zustand admiten el renderizado del lado del servidor con estrategias de hidratación adecuadas. Jotai utiliza un Provider con un almacén personalizado para SSR; Zustand utiliza createStore para las instancias del servidor.

Ambos proporcionan genéricos de TypeScript de primera clase, lo que ofrece inferencia de tipos completa para los valores de los átomos y los almacenes sin anotaciones de tipo manuales.

Las aplicaciones reales suelen combinar las tres soluciones: React Context para la configuración estática (URL base de la API, indicadores de funcionalidades), Jotai o Zustand para el estado interactivo del cliente, y React Query o SWR para los datos obtenidos del servidor.

Estas capas no entran en conflicto. Combinarlas intencionadamente según la naturaleza de cada parte del estado es una buena práctica de arquitectura.

Si su equipo tiene experiencia con Redux, el modelo de store de Zustand le resultará natural. Si su equipo está muy familiarizado con React, la API de Jotai, similar a useState, ofrece la curva de aprendizaje más sencilla.

En la mayoría de las aplicaciones, la familiaridad del equipo es más importante que las diferencias marginales de rendimiento.

Para un estado de página sencillo con algunos interruptores, useState o Context son suficientes. Para un estado compartido entre componentes en una aplicación mediana, use Zustand o Jotai. Para una interfaz muy interactiva con decenas de valores reactivos independientes, Jotai es una excelente opción.

Para datos complejos del servidor con caché, actualización en segundo plano y actualizaciones optimistas, combine cualquier biblioteca de estado del cliente con React Query.

Use Context para valores globales estáticos o que cambien rara vez. Use Zustand para el estado centralizado de la aplicación con una frecuencia de actualización moderada. Use Jotai para un estado reactivo granular, organizado por átomo, con muchas suscripciones independientes. Use React Query o SWR para el estado del servidor.

Estas categorías no se excluyen entre sí; combinarlas según el tipo de estado produce una arquitectura limpia y eficiente.

React Context es ideal para la configuración global estática; Zustand, para el estado centralizado de la aplicación con suscripciones basadas en selectores; y Jotai, para un estado atómico granular en el que muchos valores independientes se actualizan con frecuencia. Las tres opciones complementan bibliotecas de estado del servidor como React Query.

Elija según la frecuencia de actualización, la complejidad del estado y la familiaridad del equipo. Combinar las tres según la categoría del estado es un patrón válido y habitual en producción.