¿Por qué usar API de contexto?

• PARA ENTENDER POR QUÉ USAR CONTEXTO-API Primero veremos qué es Props-Drilling .

• Mire la imagen del árbol de componentes de la izquierda.
• Puede darse el caso de que un componente secundario en la parte inferior del árbol necesite datos, pero es posible que los componentes de contenedor o los componentes secundarios en el medio no necesiten esos datos.
• En este caso, a pesar de que el Componente intermedio no necesita datos, necesita recibirlos solo para pasarlos al Componente secundario.
• Si su aplicación es demasiado grande, esto causará un gran problema. Los desarrolladores deben seguir pasando datos de un componente al siguiente.
• Este problema se conoce como Props Drilling.

• En Context-API, se crea un espacio de almacenamiento separado fuera del árbol de componentes en el que tenemos que almacenar los datos.
• Ahora, si necesitamos esos datos dentro de cualquier componente, podemos acceder directamente a los datos desde Context-API.
• Ahora veamos cómo funciona esto con un ejemplo.

• Para CreateContext podemos usar createContext() de React .
• Una vez que se crea UserContext, tenemos que exportarlo.
• Ahora, para agregar datos dentro del contexto, tenemos que envolver el elemento principal con <UserContext.Provider> o <UserProvider>.
• una vez que envolvemos con Wrapper, tenemos que pasar los datos al atributo de valor .

1) En el componente de función.

2) En métodos de ciclo de vida del componente de clase.

3) En el método de procesamiento del componente de clase.

1) En el componente de función: -

• Dentro del componente funcional o ganchos, tenemos que usar el gancho useContext() proporcionado por el paquete React.
• Ahora tenemos que importar UserContext y pasarlo a useContext() .
• useContext(UserContext) devolverá los datos del usuario dentro de Context.que podemos usar más.

• La forma más común de acceder a Context desde un componente de clase es a través de static contextType.
• Si necesita el valor de Contexto fuera de render, o en un método de ciclo de vida, lo usará de esta manera.

• La forma tradicional de recuperar valores de contexto era envolver el componente secundario en el archivo Consumer.
• Desde allí, podrá acceder a la propuesta de valor como props.
• Es posible que aún vea esto, pero es más una forma heredada de acceder a Contexto.