React Context
El API de contexto nos permite compartir valores y funcionalidades a través del árbol de componentes sin necesidad de usar props.

Para crear un contexto hay que usar la función React.createContext. React.createContext recibe como argumento el valor predeterminado del contexto.
Es posible crear tantos contextos como sea necesario.
const Context = React.createContext({ count: 0, setCount: () => {} });
Al crear un contexto se crea un objeto que consta de dos partes, Context.Provider y Context.Consumer.

El Context.Provider es un componente que recibe un prop value que serán los valores a compartir. Todos los componentes renderizados dentro de este componente tendran acceso a los valores del contexto.
const App = () => {
const [count, setCount] = React.useState(0);
return (
<Context.Provider
value={{
count,
setCount
}}
>
<Component>
</Context.Provider>
);
}
Los valores del contexto en este caso serían count y setCount creados previamente usando el hook useState. Tanto Component como sus hijos van a poder acceder a estos valores.

Al consumir un contexto, React busca el Provider más cercano para consumir su valor. En caso de no encontrar un Provider, el valor será el valor predeterminado al crear el contexto. Existen 3 formas de consumir los valores contexto:

Consumer es el componente que nos permite consumir los valores del contexto usando una técnica llamada Render Props.
Este método se puede usar tanto en componentes clase como en componentes función.
const Component = () => {
return (
<Context.Consumer>
{(value) => {
return (
<div>
<span>{value.count}</span>
<button
type="button"
onClick={() => value.setCount(value.count + 1)}
>
Click
</button>
</div>
);
}}
<Context.Consumer>
)
}
Render Props renderiza una función en vez de un componente y recibe como argumento los valores del contexto.
Para aprender más sobre Render Props visita la guía oficial de Render Props.

Es posible consumir los valores del contexto y almacenar los valores en una variable usando el hook useContext. useContext recibe como argumento el contexto que se desea consumir.
Usando este método es posible consumir varios contextos desde un mismo componente.
const Component = () => {
const context = useContext(Context);
return (
<div>
<span>{context.count}</span>
<button
type="button"
onClick={() => context.setCount(context.count + 1)}
>
Click
</button>
</div>
)
}

La última forma de consumir los valores de un contexto es usando el método estático contextType.
Este método solo está disponible para componentes clase y solo es posible consumir un contexto a la vez.
class Component extends React.Component {
static contextType = Context;
render() {
return (
<div>
<span>{this.context.count}</span>
<button
type="button"
onClick={() => this.context.setCount(this.context.count + 1)}
>
Click
</button>
</div>
);
}
}
// Otra manera de definir métodos estáticos
class Componente extends React.Component {
render() {
return (
<div>
<span>{this.context.count}</span>
<button
type="button"
onClick={() => value.setCount(this.context.count + 1)}
>
Click
</button>
</div>
);
}
}
Component.contextType = Context
Para una guía completa de los hooks visita la guía oficial de Context.
Copy link
On this page
Creando un contexto
Context Provider
Consumir los valores del contexto
Context Consumer
useContext hook
Método estatico contextType