Qué es Context en React y cómo usarlo para compartir datos globales

Tiempo de lectura: 3 minutos

Cuando desarrollas aplicaciones en React, es habitual necesitar compartir datos entre muchos componentes. Pasar estos datos manualmente a través de props puede volverse complicado y difícil de mantener. Para solucionar este problema, React ofrece la API Context.

En este tutorial aprenderás qué es Context, para qué sirve y cómo implementarlo paso a paso.

Qué es Context en React

Context es una funcionalidad que permite compartir datos entre múltiples componentes sin tener que pasar props manualmente por cada nivel del árbol de componentes.

Se utiliza principalmente para manejar datos globales dentro de una aplicación, como:

• Usuario autenticado
• Tema visual (modo claro u oscuro)
• Configuración general
• Idioma
• Datos compartidos entre distintas partes de la aplicación

Context facilita el acceso a estos datos desde cualquier componente que lo necesite.

El problema que soluciona Context

Imagina que tienes un dato en un componente padre y necesitas usarlo en un componente hijo que está varios niveles por debajo. Sin Context, tendrías que pasar ese dato como prop a través de todos los componentes intermedios, aunque ellos no lo utilicen. Este proceso se conoce como prop drilling.

Context permite evitar ese problema proporcionando acceso directo a los datos desde cualquier componente.

Cómo funciona Context

El uso de Context normalmente sigue tres pasos:

1. Crear el contexto.
2. Proveer los datos mediante un Provider.
3. Consumir los datos en los componentes que los necesiten.

Paso 1: Crear un Context

Para crear un contexto se utiliza la función createContext.

import { createContext } from "react";

export const UsuarioContext = createContext();

Esta función crea un objeto que contendrá los datos compartidos.

Paso 2: Proveer el contexto

Después de crear el contexto, debes envolver los componentes que necesiten acceder a esos datos con un Provider.

import { useState } from "react";
import { UsuarioContext } from "./UsuarioContext";

function UsuarioProvider({ children }) {
  const [usuario, setUsuario] = useState("Ismael");

  return (
    <UsuarioContext.Provider value={{ usuario, setUsuario }}>
      {children}
    </UsuarioContext.Provider>
  );
}

export default UsuarioProvider;

El Provider permite compartir el valor definido en la prop value con todos los componentes hijos.

El parámetro children representa los componentes que estarán envueltos por el Provider.

Paso 3: Consumir el contexto

Para acceder a los datos del contexto se utiliza el Hook useContext.

import { useContext } from "react";
import { UsuarioContext } from "./UsuarioContext";

function Perfil() {
  const { usuario } = useContext(UsuarioContext);

  return <h1>Bienvenido {usuario}</h1>;
}

De esta forma, el componente puede acceder directamente a los datos sin recibir props.

Cómo usar el Provider en la aplicación

Normalmente el Provider se coloca en un nivel alto de la aplicación, como en el componente principal.

import UsuarioProvider from "./UsuarioProvider";
import Perfil from "./Perfil";

function App() {
  return (
    <UsuarioProvider>
      <Perfil />
    </UsuarioProvider>
  );
}

Todos los componentes dentro de UsuarioProvider podrán acceder al contexto.

Context con múltiples valores

El contexto puede compartir más de un dato.

const [usuario, setUsuario] = useState("Ismael");
const [rol, setRol] = useState("admin");

<UsuarioContext.Provider value={{ usuario, rol, setUsuario, setRol }}>
  {children}
</UsuarioContext.Provider>

Esto permite centralizar la gestión de información relacionada.

Cuándo usar Context

Context es útil cuando los datos deben ser accesibles desde muchos componentes diferentes y están relacionados con el funcionamiento global de la aplicación.

Algunos casos comunes son:

• Autenticación
• Temas visuales
• Preferencias de usuario
• Configuraciones globales

Cuándo no usar Context

No todos los datos deben almacenarse en Context. Usarlo en exceso puede dificultar el mantenimiento y afectar el rendimiento.

Es recomendable evitar Context cuando:

• Los datos solo se usan en pocos componentes.
• La información es muy local.
• Existen soluciones más simples usando props.

Buenas prácticas al usar Context

Divide los contextos por responsabilidades. Es mejor tener varios contextos pequeños que uno muy grande.

Evita almacenar lógica compleja dentro del Provider. Mantén la responsabilidad clara.

Utiliza Hooks personalizados para facilitar el acceso al contexto.

Ejemplo:

import { useContext } from "react";
import { UsuarioContext } from "./UsuarioContext";

export function useUsuario() {
  return useContext(UsuarioContext);
}

Uso del Hook personalizado:

const { usuario } = useUsuario();

Esto mejora la legibilidad y facilita la reutilización.

Context y rendimiento

Cada vez que cambia el valor del Provider, todos los componentes que consumen ese contexto se vuelven a renderizar. Para evitar problemas de rendimiento, es recomendable:

• Separar contextos cuando sea necesario.
• Memorizar valores complejos.
• Mantener el estado lo más simple posible.