Zustand: gestión del estado en React en 2 minutos

Al finalizar este tema

Comprenderá el uso básico de Zustand y podrá explicar las diferencias con Redux.

El problema persistente de React: la cascada de props

En React, para pasar datos se utilizan las props. Deben transmitirse desde el componente padre al hijo, al nieto, al bisnieto, etc., hasta llegar al componente que realmente los necesita.

App → Header → UserMenu → UserAvatar
                              ↑ Aquí se necesitan los datos del usuario

user Si los datos están en App y se necesitan en UserAvatar, los componentes intermedios entre Header y UserMenu deben recibir y pasar una user, aunque no la utilicen. Esto se conoce como Prop Drilling.

Cuando hay 50 o 100 componentes, esto se vuelve difícil de gestionar. Por eso surgieron las herramientas de gestión del estado global.

La era de Redux y sus desventajas

Redux es la herramienta original para la gestión del estado global en React. Es potente, pero implica mucho código:

// 1. Definir tipo de acción
const INCREMENT = "INCREMENT";

// 2. Función generadora de acciones
const increment = () => ({ type: INCREMENT });

// 3. Reductor
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

// 4. Crear almacén
const store = createStore(counterReducer);

// 5. Envolver la aplicación con Provider
// 6. Leer con useSelector
// 7. Escribir con useDispatch

Subir un solo número implica múltiples archivos y decenas de líneas de código. Este es el problema del boilerplate de Redux. Aunque Redux Toolkit ha reducido significativamente esta carga, aún existen casos que hacen preguntarse: "¿De verdad tiene que ser tan complicado?".

Zustand: Lo mismo en 5 líneas

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Eso es todo. La definición del almacén consta de cinco líneas. No es necesario envolver la aplicación con un proveedor.

Cuando se utiliza en un componente:

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>{count}</button>;
}

Solo necesitas llamar a useStore. Desde cualquier componente y en cualquier nivel del árbol, simplemente invoca useStore para acceder al estado global.

¿Por qué es tan simple?

Zustand crea un almacén independiente fuera de React. No depende de la API de Contexto ni de los proveedores de React. Por lo tanto:

No requiere un proveedor — No hay componentes envoltorio como <Provider store={store}>. Solo necesitas invocar useStore desde cualquier lugar.

Mínimo código repetitivo — No hay separación entre tipos de acciones, funciones generadoras de acciones y reductores. Cambias el estado con una sola función set.

Renderizado selectivo — Seleccionas solo los valores necesarios, como en useStore((state) => state.count). Este componente se vuelve a renderizar únicamente cuando cambia count. Se previenen automáticamente los renderizados innecesarios.

Patrón práctico: asíncrono + middleware

Las operaciones asíncronas, como las llamadas a API, también se manejan de forma natural:

const useStore = create((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const res = await fetch("/api/users");
    const users = await res.json();
    set({ users, loading: false });
  },
}));

persist El uso de middleware permite guardar automáticamente el estado en localStorage:

import { persist } from "zustand/middleware";

const useStore = create(
  persist(
    (set) => ({
      theme: "light",
      toggleTheme: () =>
        set((s) => ({ theme: s.theme === "light" ? "dark" : "light" })),
    }),
    { name: "app-settings" }
  )
);

La configuración del tema se mantiene incluso al actualizar la página.

¿Debería dejar de usar Redux?

No. Depende de la escala del proyecto.

Cuándo Zustand es adecuado: proyectos de pequeña a mediana escala, creación rápida de prototipos y cuando el estado global es simple. Requiere casi nada de tiempo de configuración, por lo que puedes empezar de inmediato.

Cuándo Redux es adecuado: proyectos en equipos grandes donde es crucial realizar un seguimiento de los cambios de estado (depuración con la función de retroceso de Redux DevTools) y cuando se necesitan patrones estrictos como convención del equipo.

Según el número de descargas en npm, Zustand ya se acerca o supera a Redux. Esto se debe a que se alinea con la tendencia de que "menos es más" (ser pequeño y ligero).

Puntos clave

Zustand es una biblioteca para gestionar el estado global de React sin necesidad de un proveedor ni de código repetitivo. Crea la tienda con la función create y accede a ella desde cualquier lugar mediante el hook useStore. Es una alternativa realista a Redux para proyectos de pequeña a mediana escala.