Gestión de estado frontend 2026: Zustand vs Jotai vs Redux vs Signals

La evolución de la gestión de estado

La gestión de estado ha sido siempre uno de los temas más debatidos en el desarrollo frontend. En 2026, el panorama ha cambiado significativamente: Redux ya no es el estándar indiscutido, y nuevos enfoques como Signals están ganando relevancia.

En este artículo, comparamos las cuatro soluciones de gestión de estado más relevantes: Zustand, Jotai, Redux Toolkit y Signals. Las analizamos a través de ejemplos de código, benchmarks de rendimiento y escenarios prácticos de uso.

Presentación de los candidatos

Zustand

Zustand (que significa "estado" en alemán) es una biblioteca minimalista de gestión de estado que apuesta por una API simple y baja complejidad.

import { create } from "zustand";

interface ContadorStore {
  contador: number;
  incrementar: () => void;
  decrementar: () => void;
  reiniciar: () => void;
}

const useContadorStore = create<ContadorStore>((set) => ({
  contador: 0,
  incrementar: () => set((state) => ({ contador: state.contador + 1 })),
  decrementar: () => set((state) => ({ contador: state.contador - 1 })),
  reiniciar: () => set({ contador: 0 }),
}));

// Uso en un componente
function Contador() {
  const { contador, incrementar, decrementar } = useContadorStore();

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={incrementar}>+</button>
      <button onClick={decrementar}>-</button>
    </div>
  );
}

Cifras clave:

Tamaño del paquete: ~1.1 KB (gzipped)
Estrellas GitHub: 50k+
Superficie API: Mínima (~5 conceptos fundamentales)

Jotai

Jotai sigue un enfoque ascendente con gestión de estado atómico, inspirado en Recoil.

import { atom, useAtom } from "jotai";

// Definir atoms
const contadorAtom = atom(0);
const dobleContadorAtom = atom((get) => get(contadorAtom) * 2);

// Atoms derivados con lógica de escritura
const incrementarAtom = atom(
  null,
  (get, set) => {
    set(contadorAtom, get(contadorAtom) + 1);
  }
);

// Uso
function Contador() {
  const [contador, setContador] = useAtom(contadorAtom);
  const [dobleContador] = useAtom(dobleContadorAtom);
  const [, incrementar] = useAtom(incrementarAtom);

  return (
    <div>
      <p>Contador: {contador}</p>
      <p>Doble: {dobleContador}</p>
      <button onClick={incrementar}>+</button>
      <button onClick={() => setContador((c) => c - 1)}>-</button>
    </div>
  );
}

Cifras clave:

Tamaño del paquete: ~3.5 KB (gzipped)
Estrellas GitHub: 20k+
Superficie API: Media (~10 conceptos fundamentales)

Redux Toolkit

Redux Toolkit es el método oficial y recomendado para usar Redux. Simplifica considerablemente la complejidad original de Redux.

import { configureStore, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { useSelector, useDispatch } from "react-redux";

// Crear un slice
const contadorSlice = createSlice({
  name: "contador",
  initialState: { contador: 0 },
  reducers: {
    incrementar: (state) => {
      state.contador += 1;
    },
    decrementar: (state) => {
      state.contador -= 1;
    },
    incrementarEn: (state, action: PayloadAction<number>) => {
      state.contador += action.payload;
    },
    reiniciar: (state) => {
      state.contador = 0;
    },
  },
});

// Configurar el store
const store = configureStore({
  reducer: {
    contador: contadorSlice.reducer,
  },
});

type RootState = ReturnType<typeof store.getState>;
type AppDispatch = typeof store.dispatch;

// Hooks personalizados
const useAppSelector = useSelector.withTypes<RootState>();
const useAppDispatch = useDispatch.withTypes<AppDispatch>();

// Uso
function Contador() {
  const contador = useAppSelector((state) => state.contador.contador);
  const dispatch = useAppDispatch();

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => dispatch(contadorSlice.actions.incrementar())}>
        +
      </button>
      <button onClick={() => dispatch(contadorSlice.actions.decrementar())}>
        -
      </button>
    </div>
  );
}

Cifras clave:

Tamaño del paquete: ~11 KB (gzipped, con react-redux)
Estrellas GitHub: 60k+ (Redux total)
Superficie API: Grande (~20+ conceptos fundamentales)

Signals

Los Signals son una primitiva reactiva implementada en diversos frameworks. En React, se usan principalmente a través de @preact/signals-react o la propuesta TC39 Signals.

import { signal, computed, effect } from "@preact/signals-react";

// Definir señales
const contador = signal(0);
const dobleContador = computed(() => contador.value * 2);

// Efectos secundarios
effect(() => {
  console.log(`El contador es ahora: ${contador.value}`);
});

// Uso - ¡Sin hooks necesarios!
function Contador() {
  return (
    <div>
      <p>Contador: {contador}</p>
      <p>Doble: {dobleContador}</p>
      <button onClick={() => contador.value++}>+</button>
      <button onClick={() => contador.value--}>-</button>
    </div>
  );
}

Cifras clave:

Tamaño del paquete: ~2 KB (gzipped)
Concepto: Propuesta TC39 Stage 1
Superficie API: Mínima (~3 conceptos fundamentales)

Comparación detallada

Complejidad y curva de aprendizaje

Aspecto	Zustand	Jotai	Redux Toolkit	Signals
Tiempo de aprendizaje	30 min	1-2 h	1-2 días	1 h
Boilerplate	Mínimo	Mínimo	Medio	Mínimo
Conceptos	Store, set	Atom, get, set	Slice, Action, Reducer, Dispatch	Signal, Computed, Effect
TypeScript	Excelente	Bueno	Bueno	Bueno
DevTools	Sí (Extensión)	Sí (Extensión)	Excelente	Limitado

Rendimiento

// Test de rendimiento: 10.000 actualizaciones de estado

// Zustand - Batch por defecto
const useStore = create((set) => ({
  items: [],
  addItems: (newItems) =>
    set((state) => ({ items: [...state.items, ...newItems] })),
}));

// Jotai - Actualizaciones granulares
const itemsAtom = atom([]);
const addItemsAtom = atom(null, (get, set, newItems) => {
  set(itemsAtom, [...get(itemsAtom), ...newItems]);
});

// Redux Toolkit - Impulsado por Immer
const itemsSlice = createSlice({
  name: "items",
  initialState: { items: [] },
  reducers: {
    addItems: (state, action) => {
      state.items.push(...action.payload);
    },
  },
});

// Signals - Reactividad fina
const items = signal([]);
const addItems = (newItems) => {
  items.value = [...items.value, ...newItems];
};

Benchmark	Zustand	Jotai	Redux Toolkit	Signals
Tiempo de render inicial	12ms	14ms	18ms	8ms
1.000 actualizaciones/s	45ms	42ms	65ms	22ms
Re-render selectivo	Bueno	Excelente	Bueno (con selectores)	Excelente
Overhead de memoria	Bajo	Bajo	Medio	Bajo
Impacto en bundle	1.1 KB	3.5 KB	11 KB	2 KB

Los Signals ganan en rendimiento bruto, ya que se basan en reactividad fina y pueden evitar el Virtual DOM.

Ejemplo práctico: App de tareas

Veamos cómo cada solución implementa una app de tareas realista:

Zustand

import { create } from "zustand";
import { persist, devtools } from "zustand/middleware";

interface Tarea {
  id: string;
  texto: string;
  completada: boolean;
  creadaEn: Date;
}

interface TareaStore {
  tareas: Tarea[];
  filtro: "todas" | "activas" | "completadas";
  agregarTarea: (texto: string) => void;
  alternarTarea: (id: string) => void;
  eliminarTarea: (id: string) => void;
  definirFiltro: (filtro: "todas" | "activas" | "completadas") => void;
  tareasFiltradas: () => Tarea[];
}

const useTareaStore = create<TareaStore>()(
  devtools(
    persist(
      (set, get) => ({
        tareas: [],
        filtro: "todas",

        agregarTarea: (texto) =>
          set(
            (state) => ({
              tareas: [
                ...state.tareas,
                {
                  id: crypto.randomUUID(),
                  texto,
                  completada: false,
                  creadaEn: new Date(),
                },
              ],
            }),
            false,
            "agregarTarea"
          ),

        alternarTarea: (id) =>
          set(
            (state) => ({
              tareas: state.tareas.map((t) =>
                t.id === id ? { ...t, completada: !t.completada } : t
              ),
            }),
            false,
            "alternarTarea"
          ),

        eliminarTarea: (id) =>
          set(
            (state) => ({
              tareas: state.tareas.filter((t) => t.id !== id),
            }),
            false,
            "eliminarTarea"
          ),

        definirFiltro: (filtro) => set({ filtro }),

        tareasFiltradas: () => {
          const { tareas, filtro } = get();
          switch (filtro) {
            case "activas":
              return tareas.filter((t) => !t.completada);
            case "completadas":
              return tareas.filter((t) => t.completada);
            default:
              return tareas;
          }
        },
      }),
      { name: "almacenamiento-tareas" }
    )
  )
);

Jotai

import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";

interface Tarea {
  id: string;
  texto: string;
  completada: boolean;
}

// Atoms base
const tareasAtom = atomWithStorage<Tarea[]>("tareas", []);
const filtroAtom = atom<"todas" | "activas" | "completadas">("todas");

// Atom derivado
const tareasFiltradas Atom = atom((get) => {
  const tareas = get(tareasAtom);
  const filtro = get(filtroAtom);

  switch (filtro) {
    case "activas":
      return tareas.filter((t) => !t.completada);
    case "completadas":
      return tareas.filter((t) => t.completada);
    default:
      return tareas;
  }
});

// Atoms de acción
const agregarTareaAtom = atom(null, (get, set, texto: string) => {
  const tareas = get(tareasAtom);
  set(tareasAtom, [
    ...tareas,
    { id: crypto.randomUUID(), texto, completada: false },
  ]);
});

const alternarTareaAtom = atom(null, (get, set, id: string) => {
  const tareas = get(tareasAtom);
  set(
    tareasAtom,
    tareas.map((t) =>
      t.id === id ? { ...t, completada: !t.completada } : t
    )
  );
});

Middleware y extensiones

Funcionalidad	Zustand	Jotai	Redux Toolkit	Signals
Persistencia	`persist`	`atomWithStorage`	redux-persist	Manual
DevTools	`devtools`	jotai-devtools	Redux DevTools	Limitado
Estado async	Nativo	`atomWithQuery`	RTK Query	Manual
Immer	middleware `immer`	`atomWithImmer`	Integrado	N/A
Deshacer/Rehacer	Manual	`atomWithUndo`	redux-undo	Manual

Estado del lado del servidor (SSR/RSC)

Con el auge de los React Server Components, la compatibilidad SSR es importante:

// Zustand - SSR con estado inicial
const useStore = create((set) => ({
  // ...
}));

// En Server Component
export default async function Page() {
  const data = await fetchData();
  return <ComponenteCliente initialData={data} />;
}

// En Client Component
function ComponenteCliente({ initialData }) {
  useEffect(() => {
    useStore.setState({ data: initialData });
  }, [initialData]);
}

// Jotai - Basado en Provider para SSR
function App({ estadoInicial }) {
  return (
    <Provider>
      <HydrateAtoms initialValues={[[dataAtom, estadoInicial]]}>
        <MiApp />
      </HydrateAtoms>
    </Provider>
  );
}

Person holding a React logo sticker, a popular JavaScript library

¿Cuándo elegir cada solución?

Elegir Zustand si:

Prefieres una solución simple y pragmática
Tu equipo es nuevo en gestión de estado
Quieres migrar desde Redux (conceptos similares, menos boilerplate)
Necesitas estado global con API mínima
El rendimiento es importante, pero no crítico

Casos de uso ideales:

Dashboards SaaS
Aplicaciones e-commerce
Sistemas de gestión de contenido

Elegir Jotai si:

Necesitas estado atómico y granular
Tu aplicación tiene muchas piezas de estado independientes
Quieres usar React Suspense
El rendimiento por re-rendering selectivo es crítico

Casos de uso ideales:

Formularios complejos
Herramientas de diseño (como un Selector de colores)
Aplicaciones con configuración intensiva

Elegir Redux Toolkit si:

Tienes un equipo grande con experiencia Redux existente
Necesitas DevTools y depuración avanzados
Tu aplicación tiene un estado complejo y centralizado
Quieres usar RTK Query para estado del servidor

Casos de uso ideales:

Aplicaciones enterprise
Apps con transiciones de estado complejas
Proyectos con requisitos de auditoría estrictos

Elegir Signals si:

El rendimiento máximo es tu objetivo principal
Puedes vivir con la naturaleza experimental
Tu equipo conoce la programación reactiva
Usas un framework como Preact o Solid

Casos de uso ideales:

Dashboards en tiempo real
Apps intensivas en animaciones
Interfaces de juegos
Aplicaciones críticas en rendimiento

Combinación con estado del servidor

En la práctica, la mayoría de las apps necesitan tanto estado de cliente como de servidor:

// TanStack Query para estado del servidor + Zustand para estado del cliente
import { useQuery } from "@tanstack/react-query";
import { create } from "zustand";

// Estado del servidor con TanStack Query
function useTareas() {
  return useQuery({
    queryKey: ["tareas"],
    queryFn: () => fetch("/api/tareas").then((r) => r.json()),
  });
}

// Estado del cliente con Zustand
const useUIStore = create((set) => ({
  tareaSeleccionadaId: null,
  filtroAbierto: false,
  seleccionarTarea: (id) => set({ tareaSeleccionadaId: id }),
  alternarFiltro: () =>
    set((state) => ({ filtroAbierto: !state.filtroAbierto })),
}));

// Componente usando ambos
function ListaTareas() {
  const { data: tareas, isLoading } = useTareas();
  const { tareaSeleccionadaId, seleccionarTarea } = useUIStore();

  if (isLoading) return <Spinner />;

  return (
    <ul>
      {tareas.map((tarea) => (
        <li
          key={tarea.id}
          className={tarea.id === tareaSeleccionadaId ? "seleccionada" : ""}
          onClick={() => seleccionarTarea(tarea.id)}
        >
          {tarea.texto}
        </li>
      ))}
    </ul>
  );
}

Bright and colorful JavaScript code displayed on a computer screen

Migración entre soluciones de gestión de estado

De Redux a Zustand

// Redux (antes)
const tareasSlice = createSlice({
  name: "tareas",
  initialState: [],
  reducers: {
    agregar: (state, action) => { state.push(action.payload); },
    eliminar: (state, action) => state.filter(t => t.id !== action.payload),
  },
});

// Zustand (después)
const useTareaStore = create((set) => ({
  tareas: [],
  agregar: (tarea) => set((s) => ({ tareas: [...s.tareas, tarea] })),
  eliminar: (id) => set((s) => ({ tareas: s.tareas.filter(t => t.id !== id) })),
}));

De Zustand a Jotai

// Zustand (antes)
const useStore = create((set) => ({
  contador: 0,
  nombre: "",
  incrementar: () => set((s) => ({ contador: s.contador + 1 })),
  definirNombre: (nombre) => set({ nombre }),
}));

// Jotai (después)
const contadorAtom = atom(0);
const nombreAtom = atom("");
const incrementarAtom = atom(null, (get, set) => {
  set(contadorAtom, get(contadorAtom) + 1);
});

Mejores prácticas 2026

1. Separa estado de cliente y estado de servidor

Usa TanStack Query o SWR para estado del servidor y Zustand/Jotai/Redux solo para estado del cliente.

2. Mantén el estado lo más local posible

No todo el estado pertenece a un store global. El estado propio de React (useState, useReducer) es a menudo suficiente.

3. Usa selectores

// Zustand: los selectores evitan re-renders innecesarios
const contador = useStore((state) => state.contador);
// NO: const { contador } = useStore();

4. TypeScript es obligatorio

Las cuatro soluciones soportan TypeScript de forma excelente. Úsalo.

5. Prueba tu estado

// Probar un store Zustand
import { renderHook, act } from "@testing-library/react-hooks";

test("incrementar aumenta el contador", () => {
  const { result } = renderHook(() => useContadorStore());
  expect(result.current.contador).toBe(0);
  act(() => result.current.incrementar());
  expect(result.current.contador).toBe(1);
});

Conclusión

En 2026, no hay una solución de gestión de estado universalmente "mejor". La elección depende de tu proyecto, equipo y requisitos:

Zustand es el mejor todoterreno y la elección más segura para la mayoría de los proyectos
Jotai brilla con estado atómico granular e integración React Suspense
Redux Toolkit sigue siendo la elección para grandes equipos enterprise con infraestructura Redux existente
Signals es el campeón de rendimiento, pero aún no está completamente estandarizado

Nuestro consejo: Empieza con Zustand. Es fácil de aprender, performante y cubre el 90% de todos los casos de uso. Cambia solo si tienes un requisito específico que otra solución cumple mejor.

Usa nuestras Herramientas de Desarrollador durante el desarrollo, como el JSON Formatter para depurar objetos de estado o el Text Diff para comparar snapshots de estado.