React Context API

¿Qué es Context API?

Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente a todos los niveles.

💡 En una aplicación típica de React, los datos se pasan de arriba hacia abajo (de padre a hijo) a través de props, pero hacerlo de esta forma puede conllevar al llamado Prop Drilling y la aplicación se vuelve difícil de mantener y escalar.

Cuándo usar Context API

• Context está diseñado para compartir datos que pueden considerarse “globales” para un árbol de componentes en React, como el usuario autenticado actual, el tema o el idioma preferido.
• Context se usa principalmente cuando algunos datos tienen que ser accesibles por muchos componentes en diferentes niveles de anidamiento. Se debe utilizar con moderación porque hace que la re-utilización de componentes sea más difícil.

¿Cómo usar Context API?

1. Crear un Context

El primer paso para utilizar el Context es crear uno, para esto, React proporciona el método createContext, que recibe como parámetro el valor por default del dato global o que queremos compartir en toda la aplicación.

import React from 'react'  
const context = React.createContext({  
    val1: "val1",  
    val2: "val2"  
})  
export default context

2. Crear un Provider

Lo siguiente por implementar es el Provider, un componente que viene con cada Context y que permite que los componentes se suscriban a los cambios en el Context, permitiendo detectar los cambios y renderizarse nuevamente para reflejar los cambios.

import React, { useState, useEffect } from 'react'  
import Context from './context/Context'  
const MyComponent = () => {  
    const [state, setState] = useState(null)
    useEffect(() => {  
	    ...  
	    setState({  
	        //new state  
	    })  
    }  
    return (  
        <Context.Provider value={state}>  
	        <MyApp />  
        </Context.Provider>  
    )  
}  
export default MyComponent

💡 Lo primero que tenemos que observar es que para crear el Provider, es necesario importar el Contexto (línea 2) que creamos en la sección pasada con el método createContext, una vez con la referencia, podemos ver que creamos el Provider por medio de la referencia al Context.

Lo segundo interesante es la propiedad value, la cual la utilizamos para indicarle al Provider el nuevo valor del Context, en este caso, observa que le asignamos el valor actual del estado. Algo importante a considerar es que al momento de establecer el value, estamos sobrescribiendo el valor por default que establecimos al momento de crear el contexto con createContext.

3. Crear un Consumer

El último paso es consumir el Context dentro del component, para lo cual se puede utilizar el hook useContext que nos provee React y devuelve el valor de contexto actual.

import React from 'react'  
import Context from './context/Context'  
    
const MyApp = () => {  
		const myContext = useContext(Context);
    return <p>{myContext.value}</p>          
}  
export default MyChildComponent

💡 Finalmente, cabe mencionar que podemos tener múltiples Context y Providers.

Autor: Alex Arevalo