Por que usar a API de contexto?

• Para entender por que usar Context-API Primeiro veremos o que é Props-Drilling .

• Olhe para a imagem da árvore do componente esquerdo.
• Pode haver o caso em que um Componente Filho na parte inferior da árvore precisará de dados, mas, Componentes de Contêiner ou Componentes Filhos no meio podem não precisar desses Dados.
• Nesse caso, mesmo que o Componente do meio não precise de dados, eles precisam recebê-los apenas para passá-los ao Componente filho.
• Se o seu aplicativo for muito grande, isso causará um grande problema. Os desenvolvedores precisam continuar passando dados de um para o próximo componente.
• Este problema é conhecido como Props Drilling.

• Na Context-API, um espaço de armazenamento separado é criado fora da árvore de componentes na qual temos que armazenar os dados.
• Agora, se precisarmos desses dados dentro de qualquer componente, podemos acessar diretamente os dados da Context-API.
• Agora vamos ver como isso funciona com um exemplo.

• Para CreateContext podemos usar createContext() de React .
• Uma vez que o UserContext é criado, temos que exportá-lo.
• Agora, para adicionar dados dentro de Context, temos que envolver o elemento pai com <UserContext.Provider> ou <UserProvider>.
• uma vez que envolvemos com o Wrapper, temos que passar os dados para o atributo value .

1) Em Componente de Função.

2) Nos métodos do ciclo de vida do componente de classe.

3) No método de renderização do componente de classe.

1) Em Componente de Função:-

• Dentro do Functional Component ou Hooks, temos que usar useContext() Hook Fornecido pelo pacote React.
• Agora temos que importar UserContext e passá-lo para o useContext() .
• useContext(UserContext) retornará dados do usuário dentro de Context.que podemos usar mais.

• A maneira mais comum de acessar Context de um componente de classe é por meio do static contextType.
• Se você precisar do valor de Context fora de render, ou em um método de ciclo de vida, você o usará dessa maneira.

• A maneira tradicional de recuperar valores de Contexto era envolver o componente filho no arquivo Consumer.
• A partir daí, você poderá acessar a propriedade de valor como props.
• Você ainda pode ver isso, mas é mais uma maneira herdada de acessar o Context.