🌐 useContext: compartir datos globales en React sin props

El Hook useContext permite compartir información entre componentes de React sin tener que pasar props manualmente por cada nivel del árbol. Es la solución ideal cuando varios componentes necesitan acceder al mismo dato, como el tema visual, la sesión del usuario o el idioma.

---

1️⃣ ¿Por qué usar useContext?

Sin useContext, los datos deben pasarse de padre a hijo a través de props, lo que genera el llamado “prop drilling” (pasar props por muchos niveles).

😩 Prop drilling: tener que pasar datos a través de múltiples componentes que no los usan directamente.

Con useContext se evita este problema creando un contexto global accesible desde cualquier parte de la aplicación.

---

2️⃣ Crear un contexto

Primero se crea un contexto con React.createContext() y luego se provee su valor con un Provider.

import React, { createContext, useState } from "react";

// 1️⃣ Crear el contexto
export const TemaContext = createContext();

// 2️⃣ Crear un proveedor
export function TemaProvider({ children }) {
  const [tema, setTema] = useState("claro");

  const alternarTema = () => {
    setTema(tema === "claro" ? "oscuro" : "claro");
  };

  return (
    <TemaContext.Provider value={{ tema, alternarTema }}>
      {children}
    </TemaContext.Provider>
  );
}
  

---

3️⃣ Consumir el contexto con useContext

Cualquier componente dentro del TemaProvider puede acceder al contexto sin recibir props:

import React, { useContext } from "react";
import { TemaContext } from "./TemaContext";

function BotonTema() {
  const { tema, alternarTema } = useContext(TemaContext);

  return (
    <button
      onClick={alternarTema}
      style={{
        backgroundColor: tema === "claro" ? "#f4f4f4" : "#333",
        color: tema === "claro" ? "#333" : "#f4f4f4",
        border: "none",
        padding: "10px 20px",
        borderRadius: "5px",
        cursor: "pointer",
      }}
    >
      Cambiar a tema {tema === "claro" ? "oscuro" : "claro"}
    </button>
  );
}

export default BotonTema;
  

Ejemplo visual de cambio de tema

---

4️⃣ Estructura completa de uso

import React from "react";
import { TemaProvider } from "./TemaContext";
import BotonTema from "./BotonTema";

function App() {
  return (
    <TemaProvider>
      <div>
        <h1>Aplicación con contexto</h1>
        <BotonTema />
      </div>
    </TemaProvider>
  );
}

export default App;
  

---

5️⃣ Ejemplo visual del árbol de componentes

Todos los componentes dentro de TemaProvider pueden acceder al contexto sin necesidad de recibir props. Es especialmente útil cuando tu aplicación crece y necesitas compartir estados globales como usuario, autenticación o idioma.

---

6️⃣ Buenas prácticas

• ✅ Define un contexto por responsabilidad (tema, usuario, configuración, etc.).
• ✅ Mantén los valores del contexto simples (evita pasar funciones o objetos innecesarios).
• ⚙️ Encapsula tu lógica de contexto en un archivo separado.
• 🚀 Usa useReducer o librerías como Zustand para contextos más complejos.

---

7️⃣ Resumen

useContext simplifica el intercambio de datos globales sin props. Es una herramienta poderosa para mantener tu código limpio, modular y sin cadenas de props innecesarias.

• 🌍 Evita el prop drilling.
• 🧭 Facilita la comunicación entre componentes.
• 🔄 Puede combinarse con useReducer o useState para manejar estados globales.

---

← Volver al índice