createContext y useContext de React

 ¿Con qué objetivo se utilizan createContext y useContext?

Es una excelente pregunta. En el contexto de React, createContext y useContext se utilizan para resolver uno de los problemas fundamentales de las arquitecturas basadas en componentes: el prop drilling (perforación de props).

---

¿Qué es el Prop Drilling?

Imagina que tienes datos (como la información de un usuario o el tema de color de la aplicación) que necesita un componente muy anidado, por ejemplo, en el nivel 5 de tu jerarquía de componentes.

Sin Context, tendrías que pasar esa información como prop de un componente padre al hijo, y de ese hijo al siguiente, y así sucesivamente, incluso si los componentes intermedios realmente no usan el dato. Esto se llama prop drilling y hace que el código sea difícil de mantener y de leer.

---

Objetivo y Uso de Context y useContext

El principal objetivo de createContext y useContext es proporcionar un mecanismo para compartir datos que se consideran "globales" para un árbol de componentes sin tener que pasar props manualmente en cada nivel.

El proceso se divide en dos partes clave:

1. createContext (Creación del Almacén)

createContext se utiliza para crear un objeto Context que actúa como el "almacén" o el "canal" por donde viajarán los datos.

1. Crea el Objeto Context: Defines el objeto que contendrá tus datos.

   JavaScript

   import { createContext } from 'react';
   
   // 1. Creamos el objeto Context
   export const TemaContext = createContext(null);
   

2. Proporciona el Valor (El Provider): El objeto Context viene con un componente llamado .Provider. Debes envolver la parte de tu aplicación que necesita acceder a esos datos con este componente, y le pasas el valor que quieres compartir a través de la prop value.

   JavaScript

   import { useState } from 'react';
   // ... TemaContext importado
   
   function AppLayout({ children }) {
     const [tema, setTema] = useState('claro'); // El dato global
   
     return (
       // Los 'children' (todas las páginas) podrán acceder a 'tema' y 'setTema'
       <TemaContext.Provider value={{ tema, setTema }}>
         {children}
       </TemaContext.Provider>
     );
   }
   

---

2. useContext (Consumo del Almacén)

useContext es un hook que se utiliza en cualquier componente anidado para "engancharse" al objeto Context y obtener los datos que el .Provider ha puesto a disposición.

Este hook reemplaza la necesidad de recibir la información como una prop.

JavaScript

import { useContext } from 'react';
import { TemaContext } from './TemaContext'; // Importamos el Context creado

function BotonCambiarTema() {
  // Obtenemos los datos directamente del Context, sin importar el nivel de anidación
  const { tema, setTema } = useContext(TemaContext);

  const cambiar = () => {
    setTema(tema === 'claro' ? 'oscuro' : 'claro');
  };

  return (
    <button onClick={cambiar}>
      Cambiar a tema {tema === 'claro' ? 'oscuro' : 'claro'}
    </button>
  );
}

En Resumen:

Herramienta	Función
createContext	Crea el Contexto. Define un canal o "almacén" para los datos.
.Provider	Proporciona los datos. Envuelve los componentes y expone el valor a través de la prop value.
useContext	Consume los datos. Permite a cualquier componente hijo acceder a ese valor directamente.

Se usan juntos para establecer un estado global o semiglobal y mejorar la estructura y legibilidad de las aplicaciones al evitar el paso innecesario de props a través de muchos componentes.