Descripción de la API de contexto

En un proyecto de React.js, creamos componentes y luego pasamos accesorios a esos componentes. Podemos pasar esos accesorios a niveles infinitos de componentes anidados. Pero, si hay muchos componentes y todos necesitan accesorios compartidos diferentes, entonces el proyecto se vuelve inmanejable. Ahí es donde entra en juego la API de Contexto. Nos permite usar accesorios en niveles anidados profundos sin hacer perforaciones de accesorios.

La forma en que lo usamos es creando primero un contexto y para eso usamos el gancho createContext de reaccionar. También podemos pasarle un valor predeterminado si lo deseamos. Luego creamos un componente de proveedor para ese contexto. El objeto de contexto tiene un componente de proveedor donde pasamos el valor del contexto como accesorio. Aquí he pasado tanto el valor del contexto como una función que permitirá que los componentes del consumidor modifiquen el valor.

Cualquier componente anidado dentro del proveedor tendrá acceso al valor de ese contexto particular. Incluso podemos anidar un componente dentro de múltiples proveedores y consumirá los valores de todos ellos.

Aquí, los componentes Player y Match consumirán los valores de FootballProvider y OtherProvider también.

Para usar el valor del proveedor, necesitamos usar el gancho useContext.

Esto permite el uso de valores compartidos entre componentes profundamente anidados sin componentes intermedios que contengan valores como puentes. Una desventaja de usar la API de contexto es que cada vez que cambia el valor del contexto, todos los componentes debajo de él se volverán a representar. Pero no sería del todo justo llamarlo un inconveniente, ya que este comportamiento también es beneficioso en algunos escenarios.