Context API en react

Vamos a meternos de lleno en Context API, explicado de forma experta pero clarísima. 🚀

¿Qué es Context API en React?

Context API es una herramienta nativa de React que permite compartir datos entre componentes sin necesidad de pasar props manualmente por cada nivel (es decir, evita el props drilling).

¿Qué soluciona?

Cuando tienes muchos componentes anidados y quieres que varios de ellos accedan a la misma información, el Context te permite:

• Crear un “almacén” de datos.
• Proveer esos datos a toda una sección del árbol de componentes.
• Consumir esos datos desde cualquier componente hijo, sin importar la profundidad.

¿Cómo funciona Context API?

Se basa en tres pasos:

Ejemplo completo: 🔥

Vamos a hacer un contexto de usuario.

1. Crear el contexto

import { createContext } from "react"; export const UserContext = createContext();

✅ createContext() crea un objeto con dos cosas importantes: Provider y Consumer.

2. Crear el proveedor (Provider)

import { useState } from "react";
import { UserContext } from "./UserContext";
export function UserProvider({ children }) {
  const [user, setUser] = useState({ name: "Juan", age: 25 });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {" "}
      {children}{" "}
    </UserContext.Provider>
  );
}

✅ UserProvider envuelve a tus componentes y les da acceso a user y setUser.

3. Consumir el contexto en cualquier parte del árbol

import { useContext } from "react";
import { UserContext } from "./UserContext";
function Perfil() {
  const { user } = useContext(UserContext);
  return (
    <div>
      {" "}
      <h2>Nombre: {user.name}</h2> <h3>Edad: {user.age}</h3>{" "}
    </div>
  );
}

✅ useContext(UserContext) permite leer directamente el valor del contexto.

Y tu árbol de componentes quedaría así:

import { UserProvider } from "./UserProvider";
import Perfil from "./Perfil";
function App() {
  return (
    <UserProvider>
      {" "}
      <Perfil />{" "}
      {/* Otros componentes que también pueden acceder a UserContext */}{" "}
    </UserProvider>
  );
}

¿Cómo Context API reemplaza Props Drilling?

Sin Context:

• App → Parent → Child → GrandChild
• Todos tienen que recibir user como props, aunque sólo GrandChild lo usa.

Con Context:

• App provee el user en un Provider.
• GrandChild accede directamente a user sin que Parent y Child tengan que saber nada.

➡️ Mucho más limpio, mantenible y escalable.

Tips de Experto 🧠

• Cada Context debería ser específico (no metas todo en uno solo como una "bolsa mágica").

• Si tu estado cambia frecuentemente, Context puede causar muchos re-renderizados. En esos casos, considera optimizarlo o usar soluciones como Redux, Zustand, etc.

• Context es perfecto para temas, usuarios, idioma actual, preferencias, autenticación, etc.

Resumen en un vistazo: