React Context API: Estado global sin Redux

Para aplicaciones pequeñas y medianas, Context API ofrece una solución integrada para manejar estado global sin necesidad de bibliotecas externas.

Creando un Context

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  
  const login = (userData) => {
    setUser(userData);
  };
  
  const logout = () => {
    setUser(null);
  };
  
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

export const useUser = () => useContext(UserContext);

Usando el Context en componentes

function App() {
  return (
    <UserProvider>
      <Navbar />
      <Main />
    </UserProvider>
  );
}

function Navbar() {
  const { user, logout } = useUser();
  
  return (
    <nav>
      {user ? (
        <>
          <span>Bienvenido, {user.name}</span>
          <button onClick={logout}>Cerrar sesión</button>
        </>
      ) : (
        <span>No autenticado</span>
      )}
    </nav>
  );
}

Context para tema (Dark Mode)

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div className={`app ${theme}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

Múltiples Contexts

function App() {
  return (
    <ThemeProvider>
      <UserProvider>
        <LanguageProvider>
          <MainApp />
        </LanguageProvider>
      </UserProvider>
    </ThemeProvider>
  );
}

Optimización: useReducer con Context

import { createContext, useContext, useReducer } from 'react';

const CartContext = createContext();

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter(item => item.id !== action.payload);
    case 'CLEAR_CART':
      return [];
    default:
      return state;
  }
}

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, []);
  
  return (
    <CartContext.Provider value={{ cart, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

Cuándo usar Context vs Redux

Usa Context cuando:

• Tu app es pequeña o mediana
• El estado no cambia frecuentemente
• No necesitas debugging avanzado

Usa Redux cuando:

• Tu app es grande y compleja
• Necesitas middleware sofisticado
• Quieres time-travel debugging

Conclusión

Context API es perfecto para muchos casos de uso y viene integrado en React. Antes de añadir Redux, considera si Context puede resolver tu problema de manera más simple.