Zustand en React Native: estado simple y potente

¿Por qué Zustand?

Redux es poderoso pero verbose. Context es simple pero con problemas de performance. Zustand encuentra el punto medio perfecto: API minimal, zero boilerplate, excelente TypeScript support. Es el state manager que usa el equipo de Deepyze en la mayoría de proyectos.

Instalación

npm install zustand

Store básico

import { create } from 'zustand';

interface SesionStore {
  usuario: Usuario | null;
  token: string | null;
  setUsuario: (u: Usuario, t: string) => void;
  cerrarSesion: () => void;
}

export const useSesionStore = create<SesionStore>((set) => ({
  usuario: null,
  token: null,
  setUsuario: (usuario, token) => set({ usuario, token }),
  cerrarSesion: () => set({ usuario: null, token: null }),
}));

Uso en componentes

function Header() {
  // Solo re-renderiza cuando cambia usuario.nombre
  const nombre = useSesionStore(state => state.usuario?.nombre);
  return <Text>Hola, {nombre}</Text>;
}

Persistencia con AsyncStorage

import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const useSesionStore = create(
  persist(
    (set) => ({ /* ... estado */ }),
    {
      name: 'sesion-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Cuándo NO usar Zustand

Para datos del servidor (productos, pedidos, usuarios remotos), usá React Query. Zustand es para estado UI y cliente: sesión del usuario, preferencias, carrito temporal, estado de modals.

¿Necesitás asesoría sobre arquitectura de estado? El equipo de Deepyze puede ayudarte.