🧩 Manejo de estado global (Context API / Zustand)

14 - 🧩 Manejo de estado global (Context API / Zustand)

Aprende a compartir datos y funciones entre diferentes componentes de tu aplicación Next.js utilizando Context API (nativa de React) y Zustand (una alternativa ligera y moderna).

---

🧠 ¿Qué es el estado global?

En React, cada componente puede tener su propio estado local mediante useState. Sin embargo, a medida que la aplicación crece, muchos componentes necesitan compartir información común: el usuario actual, el tema (oscuro/claro), o los items del carrito de compras.

Para esto usamos un estado global: un almacén centralizado de datos accesible desde cualquier parte de la app.

💡 Ejemplo clásico: cambiar el tema de toda la app con un solo botón.

---

⚙️ Context API — La solución nativa de React

La Context API permite crear un “contexto” que envuelve a tus componentes y les proporciona datos sin tener que pasar props manualmente en cada nivel.

📦 Ejemplo: contador global

// context/ContadorContext.js
"use client";
import { createContext, useContext, useState } from "react";

const ContadorContext = createContext();

export function ContadorProvider({ children }) {
  const [contador, setContador] = useState(0);
  const incrementar = () => setContador(contador + 1);
  const decrementar = () => setContador(contador - 1);

  return (
    <ContadorContext.Provider value={{ contador, incrementar, decrementar }}>
      {children}
    </ContadorContext.Provider>
  );
}

export const useContador = () => useContext(ContadorContext);
      

Y luego lo usamos en dos componentes diferentes:

// app/page.js
"use client";
import { ContadorProvider } from "@/context/ContadorContext";
import ContadorDisplay from "@/components/ContadorDisplay";
import ContadorBotones from "@/components/ContadorBotones";

export default function Home() {
  return (
    <ContadorProvider>
      <main className="p-6 text-center">
        <h1 className="text-2xl font-bold mb-3">🧮 Contador Global con Context</h1>
        <ContadorDisplay />
        <ContadorBotones />
      </main>
    </ContadorProvider>
  );
}
      

// components/ContadorDisplay.js
"use client";
import { useContador } from "@/context/ContadorContext";

export default function ContadorDisplay() {
  const { contador } = useContador();
  return <h2 className="text-3xl font-bold mb-2">{contador}</h2>;
}
      

// components/ContadorBotones.js
"use client";
import { useContador } from "@/context/ContadorContext";

export default function ContadorBotones() {
  const { incrementar, decrementar } = useContador();
  return (
    <div className="flex justify-center gap-3">
      <button onClick={decrementar} className="bg-red-500 text-white px-3 py-1 rounded">−</button>
      <button onClick={incrementar} className="bg-green-500 text-white px-3 py-1 rounded">+</button>
    </div>
  );
}
      

🧩 Resultado visual:

🧮 Contador Global con Context

3

⚠️ Context es ideal para compartir pocos datos (tema, usuario, idioma). Pero puede volverse lento si se usa para estados muy grandes.

---

⚡ Zustand — Estado global simple y rápido

Zustand es una librería ligera (creada por los mismos autores de Jotai y React Three Fiber) que permite manejar el estado global de forma más eficiente y sin tanto boilerplate.

Instalación:

npm install zustand

📦 Ejemplo: contador global con Zustand

// store/useContadorStore.js
"use client";
import { create } from "zustand";

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

Y luego lo usamos directamente sin Providers:

// app/zustand/page.js
"use client";
import { useContadorStore } from "@/store/useContadorStore";

export default function ZustandPage() {
  const { contador, incrementar, decrementar } = useContadorStore();

  return (
    <main className="text-center p-6">
      <h1 className="text-2xl font-bold mb-3">⚡ Contador con Zustand</h1>
      <h2 className="text-3xl mb-3">{contador}</h2>
      <button onClick={decrementar} className="bg-red-500 text-white px-3 py-1 rounded me-2">−</button>
      <button onClick={incrementar} className="bg-green-500 text-white px-3 py-1 rounded">+</button>
    </main>
  );
}
      

✅ No necesitas Provider ni Context. Los componentes se actualizan automáticamente solo cuando cambian los valores que usan.

---

📊 Comparación rápida

Característica	Context API	Zustand
Instalación	✅ Nativa	⚙️ Requiere librería
Reactividad	Media (re-render general)	Alta (renderiza solo lo necesario)
Sintaxis	Más verbosa	Muy concisa
Ideal para	Temas, usuario, idioma	Estados complejos, apps grandes

---

✅ Resumen

• 🧠 Context API es la opción nativa para estados simples.
• ⚡ Zustand ofrece un enfoque moderno, eficiente y fácil de escalar.
• 📦 Ambas pueden convivir en la misma app según el caso de uso.
• 🚀 Entender el estado global es clave para construir apps dinámicas y reactivas en Next.js.

← Volver al índice