Context en React es una característica poderosa que permite compartir datos entre componentes sin la necesidad de pasar props explícitamente en cada nivel del árbol de componentes. Utilizando Context, es posible propagar datos a lo largo de la jerarquía de componentes, facilitando el acceso a cualquier componente, sin importar su posición en el árbol.

Nota

Para comenzar, analicemos la sintaxis. Proporcionaremos una guía paso a paso, asegurando la comprensión de cada concepto a lo largo del proceso. La aplicación de context requiere una implementación de código específica en varios niveles de componentes. Una vez que cubramos la sintaxis en detalle, abordaremos un ejemplo práctico.

Sintaxis:

Primer paso: Se crea un nuevo Context utilizando la función createContext() de la biblioteca React y se asigna a una variable. Esto debe hacerse en el nivel superior de la aplicación. Normalmente, se realiza en un archivo separado (por ejemplo, context.js). Este archivo será responsable del objeto Context.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

Segundo paso: En el archivo App, se envuelven todos los componentes que requieren acceso a los datos compartidos con el componente Provider del Context creado. El componente Provider permite definir el valor del contexto y ponerlo a disposición de todos los componentes hijos que consumen ese contexto.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

Tercer paso: En el archivo App, también se debe proporcionar la información del contexto. Esto se logra utilizando la propiedad value del componente Context.Provider. Se asignan todos los datos requeridos a la propiedad value.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

Cuarto paso: En los componentes hijos (ChildCompOne o ChildCompTwo), se puede acceder a los datos compartidos utilizando el hook useContext. Para usar el hook useContext, se debe pasar el Context creado desde el archivo context.js como argumento.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Código completo de la aplicación:

Nota

Por favor, tómese un momento para revisar cada paso, abriendo cada archivo y carpeta, para asegurarse de comprender claramente el proceso. El próximo capítulo continuará con un ejemplo que combina Context y hooks. Esto le permitirá ver cómo estos conceptos funcionan juntos en la práctica.