¡Bienvenidos de nuevo amigos!


Hoy repasaremos los conceptos básicos de un React Hook llamado useContext. useContext es una poderosa herramienta que va un paso más allá de useState para crear un estado global que puede transmitir información a componentes hijos y nietos sin pasar accesorios directamente.

Pero me estoy adelantando.
Si no está familiarizado con useState, salte y lea primero mi artículo anterior, luego regrese y prepárese para sorprenderse.


Cómo usar 'useState': https://dev.to/deborah/how-to-use-state-in-react-2pah

Ahora que estás al día con 'useState', ¡profundicemos en 'useContext'!

¿Qué es useContext?:

useContext es ideal para datos que deben ubicarse en un ámbito global (como un nombre de usuario que mantendrá a alguien conectado durante toda la aplicación), pero no es el atajo definitivo para pasando accesorios a los componentes infantiles.
Sin embargo, useContext nos permite pasar datos sin pasar accesorios directamente y, por lo tanto, es extremadamente útil cuando encontramos datos a los que deben acceder varios componentes secundarios o que deben estar disponibles en toda la aplicación.

Para que useContext esté en funcionamiento, debemos seguir dos pasos: primero, debemos crear un objeto de contexto ('createContext'), luego debemos acceder al valor a través de un proveedor usando el enlace 'useContext'. .

Los siguientes ejemplos se han simplificado para darle una mejor idea de qué se trata useContext y cómo usarlo, pero debe tener en cuenta que createContext a menudo se declara en un archivo independiente. Sin embargo, comparo 'Parent.js' con un archivo típico 'App.js' (un componente en la parte superior de la jerarquía de componentes). Parent.js es donde definí todas mis variables de estado, las funciones que actualizan esas variables de estado y realicé búsquedas en la base de datos usando useEffect. Elegí declarar createContext en mi componente de nivel superior en lugar de crear su propio archivo para simplificar esta explicación y que puedas comprender mejor los conceptos centrales de Context.

Dicho todo esto, comencemos por el principio: ¡creaContext!

1. Lo primero que debemos hacer es declarar y exportar una variable llamada 'Contexto' que usaremos más adelante en nuestros componentes secundarios [estamos creando una variable ahora para que nuestro código sea más simple y podamos colocar un valor (datos) dentro de él para acceder más tarde]:

export Context = React.createContext();

'Context' es un objeto de contexto creado llamando a 'createContext'. El objeto de contexto contiene un componente llamado Proveedor al que ahora podremos llamar y luego pasar las variables y funciones que queremos mantener en nuestro nivel "global".

2. Con nuestra variable 'Contexto', saltemos ahora a nuestro JSX en la declaración de devolución. Aquí llamaremos 'Contexto' y lo envolveremos en etiquetas de apertura (corchetes angulares), y también llamaremos al Proveedor de esta manera:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Para completar 'Context.Provider', también debemos proporcionar un valor a 'Provider'. Aquí es donde pasaremos un objeto con todas y cada una de las variables y funciones que llamaremos con 'Contexto' en los componentes secundarios:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Es MUY IMPORTANTE tener en cuenta que debemos colocar TODOS los componentes secundarios que utilizarán las variables y funciones entre las etiquetas. Por ejemplo:

return(
    
);

Observe que no necesitamos pasar ningún accesorio directamente a los componentes secundarios (como lo haríamos con 'useState') siempre que coloquemos los accesorios dentro de 'value'.

Ahora que hemos usado createContext y pasado todos nuestros elementos globales a 'Context.Provider', estamos listos para pasar a los componentes secundarios y ver cómo usar 'Context'.

3. Vayamos a un componente secundario que (para este ejemplo) se encuentra en el archivo "Child.js". Como es la vida con la codificación: si quieres usar algo, debes importarlo. Sigamos adelante y obtengamos el "Contexto" desde donde lo declaramos en "Parent.js" para poder usarlo en este componente secundario ("Child.js"):

import Context from ‘./Parent.js’;

4. Ahora que tenemos acceso a 'Contexto' en el componente secundario, necesitamos importar 'useContext' al archivo para poder pasarle 'Contexto' (más sobre esto en breve):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. ¡Genial! Ahora usemos 'useContext'. Primero necesitamos declarar una variable para usar 'useContext'. Haremos esto dentro del componente de manera similar a cómo declararíamos useState:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

En este código utilizamos llaves {} para indicar la asignación de desestructuración. Esa es una forma elegante de decir que podemos llamar a múltiples variables y funciones almacenadas en Context. También estamos pasando 'Context' a 'useContext' para que podamos acceder a los valores definidos en Context.Provider (que declaramos en 'Parent.js').



6. Lo creas o no, ¡ya estás listo! Ahora puede usar los valores de contexto en su código tal como usaría normalmente Estado. Por ejemplo:

const expId = example.id;

o

setExample(newExample);

Recapitulemos:

¡Felicidades! Ahora tiene todas las herramientas para comenzar con createContext y useContext. Comprende que useContext le permite crear una especie de "estado global" que puede pasar variables y funciones a componentes sin pasar accesorios directamente a través de componentes secundarios.

También profundizamos en los seis pasos necesarios para que el contexto funcione en sus aplicaciones. Ahora está listo para comenzar a codificar con createContext y useContext, pero en caso de que alguna vez necesite una guía de inicio rápido, aquí la tiene:

En su componente principal, declare y exporte una variable llamada 'Contexto' usando 'createContext':

export const Context = React.createContext();

En el JSX del componente principal, envuelva todos los componentes secundarios que necesitan acceso al contexto en Context.Proivder y pase cualquier variable/función dentro de un objeto:

   //Child components

En su componente secundario, importe 'useContext':

import React, { useContext } from ‘react’;

Importe también 'Contexto' desde el componente principal:

import Context from “./Parent.js’;

Luego use useContext y pásele su variable 'Contexto':

const { example, handleExample } = useContext(Context);

Finalmente, use el contexto al que ahora tiene acceso (en nuestros ejemplos anteriores, esto sería 'ejemplo' y 'handleExample') como sea necesario en el componente secundario.

¡Bien hecho! Y hasta la próxima, ¡feliz codificación!

Una última nota, si desea profundizar en este tema, aquí están los recursos de documentación oficial a los que también hice referencia mientras aprendía useContext y escribía este blog:

Documentación oficial:
https://react.dev/reference/react/createContext

Documentación oficial heredada, todavía algo útil para comprender useContext:https://legacy.reactjs.org/docs/context.html