React Context vs Zustand: Cuándo usar cada uno
Los desarrolladores suelen cometer un error con el estado de React. Usan Context de forma incorrecta y luego culpan a Context por los problemas de rendimiento.
El problema suele ser un único objeto de contexto de gran tamaño. Cuando cambia un valor en ese objeto, cada componente que utiliza ese contexto se vuelve a renderizar. Incluso si un componente solo necesita una pequeña parte de los datos, sigue reaccionando a cada cambio en el objeto.
Si tus notificaciones se actualizan cada 30 segundos, tu Navbar se vuelve a renderizar incluso si la Navbar solo necesita el nombre de usuario. Esto acaba con el rendimiento.
Puedes solucionar esto sin una librería. Divide tus contextos según la frecuencia con la que cambian.
En lugar de un único contexto grande, utiliza varios: • UserContext para los datos del usuario • UIContext para el estado de la barra lateral • NotificationContext para las alertas
Ahora, tu Navbar solo se vuelve a renderizar cuando cambian los datos del usuario. Esta simple división resuelve la mayoría de las quejas de rendimiento.
Usa React Context para valores estables: • Temas • Estado de autenticación • Configuración de idioma
Context también funciona bien con Server Components. Zustand funciona solo en el lado del cliente.
Usa Zustand cuando necesites suscripciones selectivas. Zustand permite que los componentes se suscriban a fragmentos específicos del estado. Si una parte de tu store cambia, solo se vuelven a renderizar los componentes que observan esa parte específica.
Sigue esta lógica para el nuevo estado:
Usa React Context si: • Los datos son estables (tema, autenticación, idioma). • Necesitas que funcione con SSR o Server Components. • Quieres evitar el prop drilling dividiendo los contextos.
Usa Zustand si: • Los datos cambian con frecuencia. • Los componentes necesitan observar fragmentos específicos del estado. • Tu lógica es compleja.
Espera. No uses ninguno de los dos para datos de API. Si estás obteniendo datos de un servidor, usa TanStack Query. Context y Zustand no gestionan el almacenamiento en caché (caching) ni la actualización en segundo plano (background refetching).
Resumen: • Un objeto de contexto grande provoca re-renderizados. Divídelo. • Usar Zustand para valores estables es excesivo. • Usar Context para cambios frecuentes causa retrasos. • Usar Zustand para el estado del servidor es la herramienta incorrecta.