Introducción a Zustand

Hasta ahora hemos visto cómo crear estado global utilizando Context API. Es una solución válida y nativa de React, pero cuando una aplicación empieza a crecer, aparecen algunos problemas clásicos: demasiados providers, renders innecesarios y una estructura difícil de escalar.

En esta clase vamos a conocer Zustand, una de las librerías más populares y minimalistas para la gestión de estado global en React.

Verás por qué es tan utilizada, qué ventajas tiene frente a Context y cómo empezar a usarla con muy poco código.

¿Qué es Zustand?

Zustand es una librería de gestión de estado global:

• Minimalista y muy ligera (≈ 1 KB)
• Con una API muy sencilla
• Sin necesidad de providers
• Con renders optimizados por defecto
• Compatible con React y también usable fuera de React
• Con soporte completo para TypeScript

Su nombre viene del alemán y significa literalmente estado.

¿Por qué usar Zustand en lugar de Context?

Context API tiene ventajas claras:

• Viene incluida en React
• No requiere instalar dependencias
• Es perfecta para estado que cambia poco

Pero también tiene limitaciones:

• Necesita providers
• Puede provocar rerenders innecesarios
• Se vuelve compleja en aplicaciones grandes

Zustand soluciona muchos de estos problemas:

• Menos código y menos boilerplate
• No hay providers
• Los componentes solo se rerenderizan cuando el estado que usan cambia
• Es fácil de organizar y escalar

El único “pero” es que requiere instalar una dependencia externa.

Instalación de Zustand

Instalar Zustand es tan simple como ejecutar:

npm install zustand

Con esto ya tenemos todo lo necesario para empezar a crear nuestro estado global.

Creando nuestra primera store

En lugar de usar Context, vamos a crear una store global.

Una buena práctica es crear una carpeta store donde vivirá todo el estado global de la aplicación.

Ejemplo de una store de autenticación:

import { create } from 'zustand'

type AuthState = {
  isLoggedIn: boolean
  login: () => void
  logout: () => void
}

export const useAuthStore = create<AuthState>((set) => ({
  isLoggedIn: false,
  login: () => set({ isLoggedIn: true }),
  logout: () => set({ isLoggedIn: false }),
}))

Aquí estamos:

• Creando la store con create
• Definiendo el estado inicial
• Definiendo acciones para modificar ese estado
• Exportando directamente un custom hook

Usando la store en los componentes

Una de las grandes ventajas de Zustand es que no necesitamos providers.

Simplemente importamos el hook donde lo necesitemos:

import { useAuthStore } from '../store/auth'

export function Header() {
  const { isLoggedIn, login, logout } = useAuthStore()

  return (
    <>
      {isLoggedIn ? (
        <button onClick={logout}>Cerrar sesión</button>
      ) : (
        <button onClick={login}>Iniciar sesión</button>
      )}
    </>
  )
}

No hay contexto, no hay provider, no hay configuración extra.

Renders mucho más eficientes

Otra gran diferencia frente a Context es cómo se gestionan los renders.

Con Zustand:

• Solo se rerenderizan los componentes que usan la parte del estado que cambia
• Los cambios son mucho más granulares
• Evitamos rerenderizar toda la aplicación

Esto mejora notablemente el rendimiento en aplicaciones reales.

Cuándo usar Zustand

Zustand es una gran opción cuando:

• Necesitas estado global que cambia con frecuencia
• Tu app empieza a crecer y Context se vuelve incómodo
• Quieres una API simple y directa
• Buscas buen rendimiento sin complicarte

Context sigue siendo útil para casos simples, pero para estado global más complejo, Zustand suele ser una mejor elección.

Resumen

En esta clase has aprendido:

• Qué es Zustand y por qué es tan popular
• Sus ventajas frente a Context API
• Cómo crear una store global
• Cómo usarla sin providers
• Por qué ofrece mejores renders

En la siguiente clase seguiremos profundizando en patrones de estado global y buenas prácticas para aplicaciones React más grandes.