React Context

Search…
React Context
El API de contexto nos permite compartir valores y funcionalidades a través del árbol de componentes sin necesidad de usar props.
Creando un contexto
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.
Context Provider
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.
Consumir los valores del contexto
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:
Context Consumer
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.
useContext hook
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>
  )
}
Método estatico contextType
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.
React Hooks
React Bootstrap
Last modified 2yr ago
Copy link
On this page
Creando un contexto
Context Provider
Consumir los valores del contexto
Context Consumer
useContext hook
Método estatico contextType