Original article: How to Use the React Context API in Your Projects

La gestión del estado es una parte esencial del desarrollo de aplicaciones en React. Una forma común de gestionar el estado es pasando props. Pasar props significa enviar datos de un componente a otro. Es una buena manera de asegurarse de que los datos lleguen al lugar correcto en una aplicación React.

Pero puede resultar molesto pasar props cuando tienes que enviar los mismos datos a muchos componentes o cuando los componentes están muy lejos unos de otros. Esto puede hacer que una aplicación sea más lenta y más difícil de trabajar.

Afortunadamente, React proporciona una función incorporada conocida como Context API que ayuda a "teletransportar" datos a los componentes que los necesitan sin pasar props.

En este artículo, exploraremos cómo funciona Context API y cómo usarla de manera efectiva en sus aplicaciones React.

El problema al pasar props

En React, pasar props es un concepto fundamental que permite que un componente principal comparta datos con sus componentes secundarios, así como con otros componentes dentro de una aplicación.

En muchos casos, pasar props puede ser una forma eficaz de compartir datos entre diferentes componentes de su aplicación. Pero pasar props a lo largo de una cadena de múltiples componentes para llegar a un componente específico puede hacer que su código sea demasiado engorroso.

Según el diagrama anterior, para pasar datos al componente "Hijo B", debemos pasarlos a través de todos los componentes intermedios, incluso si esos componentes en realidad no usan los datos por sí mismos. Esto es lo que se conoce como "prop drilling".

El prop drilling puede hacer que tu código sea más difícil de leer y mantener, y también puede dificultar la refactorización de tus componentes más adelante.

Aquí es donde entra en juego Context API. Con Context API, puede almacenar datos en el nivel superior del árbol de componentes y ponerlos a disposición de todos los demás componentes que los necesiten sin pasar props.

¿Cómo funciona Context API?

Context API permite pasar datos a través de un árbol de componentes sin tener que pasar props manualmente en cada nivel. Esto facilita el intercambio de datos entre componentes.

Por ejemplo, digamos que tiene una aplicación de compras con un componente que muestra el carrito de compras de un usuario y otro componente que muestra el historial de pedidos del usuario.

Con Context API, puede crear un "contexto" que contenga la información de compras del usuario, como su carrito y su historial de pedidos. Luego, puede usar ese contexto tanto en el carrito de compras como en el componente del historial de pedidos, sin tener que pasar la información a través de props.

Es como tener una caja grande que contiene todo lo que necesitas para tu viaje de compras. Puedes sacar cosas de la caja cuando las necesites y volver a guardarlas cuando hayas terminado.

Básicamente, Context API consta de dos componentes principales: el proveedor de contexto y el consumidor de contexto. El proveedor es responsable de crear y gestionar el contexto que contiene los datos que se compartirán entre los componentes. Por otro lado, el consumidor se utiliza para acceder al contexto y sus datos desde dentro de un componente.

En el ejemplo dado, el proveedor creará el contexto que contiene la información de compras del usuario, mientras que los componentes del consumidor (carrito de compras e historial de pedidos) accederán a ese contexto para recuperar los datos que necesitan. Esto evita la necesidad de transmitir la información a través de props, lo que hace que su código sea más eficiente y más fácil de administrar.

¿Cómo empezar a usar context API?

Para comenzar a utilizar Context API en sus aplicaciones, deberá seguir unos sencillos pasos:

Crear un objeto de contexto

Primero, necesita crear un objeto de contexto usando la función createContext que viene de manera nativa en React. Este objeto de contexto contendrá los datos que desea compartir en su aplicación.

Cree un nuevo archivo llamado MiContexto.js en la carpeta src y agregue el siguiente código para crear un objeto de contexto:

import { createContext } from 'react';

export const MiContexto = createContext("");

En el código anterior, importamos createContext desde React y lo usamos para crear un nuevo objeto de contexto llamado "MiContexto". Luego, exportamos el objeto de contexto para poder usarlo en otras partes de nuestra aplicación.

Envolver componentes con un Proveedor

Una vez que haya creado un objeto de contexto, debe envolver los componentes que necesitan acceso a los datos compartidos con un componente de proveedor. El componente Proveedor acepta una propiedad value que contiene los datos compartidos, y cualquier componente que sea hijo del componente Proveedor puede acceder a esos datos compartidos.

Es importante tener en cuenta que el componente Proveedor debe incluirse alrededor del componente de nivel superior en una aplicación para garantizar que todos los componentes secundarios tengan acceso a los datos compartidos.

A continuación se muestra un ejemplo que demuestra cómo empaquetar componentes con un Proveedor usando Context API:

// Creamos un componente padre que envuelva los componentes hijos con un Proveedor
import { useState, React } from "react";
import { MiContexto } from "./MiContexto";
import MiComponente from "./MiComponente";

function App() {
  const [texto, setTexto] = useState("");

  return (
    <div>
      <MiContexto.Provider value={{ texto, setTexto }}>
        <MiComponente />
      </MiContexto.Provider>
    </div>
  );
}

export default App;

En este ejemplo, tenemos un componente principal llamado App. Este componente tiene una variable de estado llamada "texto", que inicialmente se establece en una cadena vacía. También hemos definido una función llamada setTexto que se puede usar para actualizar el valor del texto.

Consumir el contexto

Ahora que hemos creado el componente proveedor, necesitamos consumir el contexto en otros componentes. Para hacer esto, usamos el hook "useContext" de React.

import { useContext } from 'react';
import { MiContexto } from './MiContexto';

function MiComponente() {
  const { texto, setTexto } = useContext(MiContexto);

  return (
    <div>
      <h1>{texto}</h1>
      <button onClick={() => setTexto('Hola mundo!')}>
        Click me
      </button>
    </div>
  );
}

export default MiComponente;

En este ejemplo, hemos utilizado el hook useContext para acceder a las variables "texto" y "setTexto" que se definieron en el componente del proveedor.

Dentro de la declaración de retorno de "MiComponente", hemos representado un elemento de párrafo que muestra el valor del texto. También hemos representado un botón que, al hacer clic, llamará a la función setTexto para actualizar el valor del texto a "¡Hola, mundo!".

¡Y eso es! Así es como puedes usar la Context API en tu aplicación React.

Al crear un objeto de contexto, definir un componente de proveedor y consumir el contexto en otros componentes, puede compartir datos en su aplicación de una manera simple y eficiente.

Casos de uso de context API

A continuación se muestran algunos casos de uso reales de Context API:

1. Temas: puede utilizar Context API para almacenar el tema actual de su aplicación y ponerlo a disposición de todos los componentes. De esta manera, cada vez que el usuario cambie el tema (como habilitar el modo oscuro), todos los componentes se actualizarán con el nuevo tema.
2. Autenticación de usuario: también puede utilizar Context API para almacenar el estado de autenticación de un usuario y transmitirlo a todos los componentes que lo necesitan. De esta manera, puede restringir fácilmente el acceso a ciertas partes de su aplicación según el estado de autenticación del usuario.
3. Soporte multilingüe: puede almacenar el idioma actual de su aplicación en el contexto y transmitirlo a todos los componentes que lo necesiten. De esta manera, puede cambiar fácilmente entre diferentes idiomas sin tener que pasar el idioma como props a todos los componentes.
4. Acceso a datos de fuentes externas: finalmente, puede utilizar Context API para almacenar datos recuperados de fuentes externas, como API o bases de datos, y ponerlos a disposición de todos los componentes. Esto puede simplificar su código y facilitar la administración de datos en su aplicación.

En resumen

En este artículo, exploramos Context API de React, una poderosa herramienta para administrar el estado en aplicaciones React.

Hemos analizado los conceptos básicos Context API, incluida la creación de un contexto, la creación de un componente de proveedor para pasar datos a componentes secundarios y el consumo de datos en otro componente mediante el hook useContext.

Conclusión

Si está interesado en explorar cómo implementar un tema de modo claro/oscuro en sus propios proyectos de React usando Context API, he creado un sitio web simple que demuestra cómo hacerlo. Puedes encontrar el código del proyecto en mi GitHub.

Al explorar el código y experimentar con sus propias modificaciones, estará bien encaminado para dominar Context API y desbloquear todo su potencial en sus propios proyectos.

¡Muchas gracias por leer!