¿Qué es el contexto global?

<aside> 🌐 El contexto global es una característica de la librería React que permite pasar información de un componente padre a varios componentes hijos sin tener que pasar explícitamente las props entre cada componente. Esto es muy útil cuando se desea compartir datos como el tema actual de la aplicación, el idioma, la autenticación, etc., entre varios componentes que están a diferentes niveles en la jerarquía de componentes.

</aside>

Uso con createContext

En una aplicación de React con Vite, se puede utilizar la librería createContext para crear un contexto global. Primero, se crea el contexto utilizando createContext. Luego, se envuelve una sección de la aplicación con el proveedor del contexto creado, lo que permitirá que los componentes hijos puedan acceder a los datos proporcionados por el contexto. Finalmente, los componentes que necesiten acceder a los datos del contexto pueden utilizar el hook useContext para acceder a los datos del contexto global.

En nuestro marketplace se puede implementar de tal manera que nos permita disponer de una sola fuente de información desde donde se actualizarán los estados y cualquier componente hijo que consuma el contexto podrá tener esa información al día. Un ejemplo claro sería un componente card que posee un botón para añadir al carrito, los estados de card tendrán que comunicarse con los estados del carrito, para que al darle click a uno, aumente el contador del carrito y se agregue el producto seleccionado.

Sin el contexto global tendríamos que transferir props de un lado a otro de la aplicación y sería más desordenado y se llegaría al llamado prop drilling si la aplicación escala mucho sin una fuente de información.

Creación del contexto

Para la creación del contexto, crearemos una nueva carpeta Context/index.jsx:

Vamos a usar la biblioteca de React para crear un contexto llamado ShoppingCartContext y un proveedor de contexto llamado ShoppingCartProvider. El contexto proporciona una forma de compartir datos entre componentes de React sin pasar explícitamente las props a través de cada nivel de la jerarquía de componentes.

1. Importamos la función createContext de la biblioteca de React. La función createContext se utiliza para crear un nuevo contexto.
2. Creamos y exportamos el contexto llamado ShoppingCartContext utilizando la función createContext().
3. Exportamos el proveedor de contexto ShoppingCartProvider. El proveedor de contexto es un componente de React que envuelve a otros componentes y proporciona el valor del contexto a a los componentes hijos que reciba.
4. El proveedor de contexto ShoppingCartProvider es una arrow function que toma un objeto de propiedades llamado children como argumento destructurado. Los children representan los componentes que se envolverán con el proveedor de contexto.
5. Dentro de la función ShoppingCartProvider, se utiliza el componente ShoppingCartContext.Provider para envolver los children. El componente Provider es proporcionado por el contexto creado previamente.
6. El proveedor de contexto ShoppingCartProvider devuelve el componente ShoppingCartContext.Provider con los children como hijos.
7. Quedando el contexto así:

import { createContext } from 'react'

export const ShoppingCartContext = createContext();

export const ShoppingCartProvider = ({children}) => {
    return (
        <ShoppingCartContext.Provider>
            {children}
        </ShoppingCartContext.Provider>
    )
}

Innvocación del contexto

Antes de poder consumirlo vamos a envolver toda nuestra aplicación en el contexto creado. Así todo lo que va adentro se comportará como hijo que podrá consumir el contexto.