⚛Os 10 React Hooks Mais Úteis: 03 - useContext⚛
Tags: javascript, webdev, beginners, react
Published: 2022-12-24 03:13:04


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyp1oqx4hrtcmssczr0v.png)
_Este é o terceiro artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação._
<br>
O `useContext` é um hook do React que permite acessar o contexto de um componente de forma fácil e simples. Ele é muito útil quando precisamos **compartilhar informações entre componentes** de forma acessível e sem precisar passar manualmente por todos os componentes intermediários.
Para usar o `useContext`, primeiro precisamos criar um contexto. Isso é feito usando a função `createContext`:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hu910w2uiwet992yijf.png)
Aqui, criamos um contexto chamado `MyContext`. Ele vai nos permitir compartilhar informações entre componentes.

Em seguida, precisamos fornecer o contexto para os componentes que precisam acessá-lo. Isso é feito usando o componente `Provider`:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se9c98uc6c4okypg9t73.png)
Agora, estamos passando o objeto `value` para o contexto usando o `Provider`. Qualquer componente que esteja dentro do `Provider` terá acesso ao contexto.

Para acessar o contexto em um componente, usamos o hook `useContext`:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/winl3bln6cmupt4hjkau.png)
Nexte exemplo, estamos usando o `useContext` para acessar o contexto criado anteriormente. O valor retornado pelo `useContext` é o mesmo valor passado para o `Provider` (no caso, o objeto `value`).

Então, o exemplo completo seria:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cylj5wak69tnj0segpd.png)
O código acima cria um contexto chamado `MyContext` usando a função `createContext` do React. Em seguida, o contexto é fornecido para os componentes que precisam acessá-lo usando o componente `Provider`. Por fim, o contexto é acessado em um componente usando o hook `useContext`.

Na função `App`, criamos um objeto chamado `value` com uma propriedade `foo`. Em seguida, passamos o objeto `value` para o contexto usando o `Provider`. Qualquer componente que esteja dentro do `Provider` terá acesso ao contexto. No caso, estamos renderizando um componente chamado `MyComponent` dentro do `Provider`.

Na função `MyComponent`, usamos o hook `useContext` para acessar o contexto criado anteriormente. O valor retornado pelo `useContext` é o mesmo valor passado para o `Provider` (no caso, o objeto `value`). Em seguida, retornamos um elemento `div` com o valor da propriedade `foo` do objeto `value`.

Em resumo, esse código permite compartilhar informações entre componentes de forma acessível e sem precisar passar manualmente por todos os componentes intermediários usando o contexto e o `useContext`.
<br>
# Aplicabilidades do useContext
<br>
## Compartilhar um tema entre componentes
Imagine que você tem um aplicativo que tem um tema dark e light e você quer permitir que o usuário altere o tema. Você pode criar um contexto chamado `ThemeContext` que armazena o tema atual (dark ou light) e uma função para alterar o tema. Em seguida, você pode usar o hook `useContext` para ler o valor do contexto e a função para alterar o tema em qualquer componente filho que precisa acessar essas informações. Veja:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx3k81hpt88xttvqhuby.png)
1 - O código começa importando os módulos `createContext`, `useContext` e `useState` do React;
2 - Em seguida, é criado um contexto chamado `ThemeContext` usando `createContext`;
3 - O componente `ThemeProvider` é criado e usa o hook `useState` para gerenciar o estado do tema atual (dark ou light). O componente de contexto `ThemeContext.Provider` é usado para fornecer o contexto aos componentes filho. O valor do contexto é passado como um prop para o componente de contexto e inclui o tema atual e uma função para alterar o tema;
4 - O componente `Child` é criado e usa o hook `useContext` para ler o contexto `ThemeContext`. O valor do contexto é armazenado nas variáveis `​​theme` e `setTheme`.
5 - O componente `Child` renderiza um parágrafo que exibe o tema atual e um botão que, quando clicado, chama a função `setTheme` para alterar o tema para light.
6 - O componente `App` é criado e renderiza o componente `ThemeProvider`, que por sua vez renderiza o componente `Child`. Isso significa que o contexto `ThemeContext` está disponível para o componente `Child`.
<br>
## Acessar dados do usuário em vários componentes
Outro uso comum do hook `useContext` ocorre no caso em que você tem um aplicativo que precisa acessar dados do usuário em vários componentes.
Em vez de passar os dados do usuário como propriedade para cada componente, você pode **usar um contexto para armazenar os dados** do usuário e usar o hook `useContext` para **ler os dados em qualquer componente** que precisa acessá-los.
Aqui está o código que implementa esse comportamento:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdobd4nfzwxcwb94ygpi.png)
1 - O código começa importando os módulos `createContext` e `useContext` do React.
2 - Em seguida, é criado um contexto chamado `UserContext` usando `createContext`.
3 - O componente `Child` é criado e usa o hook useContext para ler o contexto `UserContext`. O valor do contexto (no caso, os dados do usuário) é armazenado na variável user.
4 - O componente `App` é criado e usa o componente de contexto `UserContext.Provider` para fornecer o contexto aos componentes filho.
5 - O valor do contexto é passado como um prop para o componente de contexto. No exemplo, os dados do usuário são passados como o valor do contexto.
6 - O componente `Child` é renderizado dentro do componente `App`, então o contexto `UserContext` está disponível para ele. O componente `Child` usa o hook `useContext` para ler o contexto e exibe o nome do usuário.
<br>
## Gerenciamento de idioma
Você pode usar um contexto para armazenar o idioma atual do aplicativo e permitir que os componentes filho acessem e alterem o idioma.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs12qd16m8gue8aku9pd.png)
1 - O código começa importando os módulos `createContext`, `useContext` e `useState` do React.
2 - Em seguida, é criado um contexto chamado `LanguageContext` usando `createContext`.
3 - O componente `LanguageProvider` é criado e usa o hook `useState` para gerenciar o estado do idioma atual (en ou pt-BR). O componente de contexto `LanguageContext`.Provider é usado para fornecer o contexto aos componentes filho. O valor do contexto é passado como um prop para o componente de contexto e inclui o idioma atual e uma função para alterar o idioma.
4 - O componente `Child` é criado e usa o hook `useContext` para ler o contexto `LanguageContext`. O valor do contexto é armazenado nas variáveis ​​language e `setLanguage`.
5 - O componente `Child` renderiza um parágrafo que exibe o idioma atual e um botão que, quando clicado, chama a função `setLanguage` para alterar o idioma para pt-BR.
6 - O componente `App` é criado e renderiza o componente `LanguageProvider`, que por sua vez renderiza o componente `Child`. Isso significa que o contexto `LanguageContext` está disponível para o componente `Child`.
<br>
## Hook useContext em autenticação
Você pode usar um contexto para armazenar o status de autenticação do usuário e permitir que os componentes filho acessem e alterem o status de autenticação. Acompanhe:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xowdbo2j1ay8gy5b4hro.png)
Neste código, o contexto `AuthContext` é criado usando `createContext`. 
1 - O componente `AuthProvider` usa o hook `useState` para gerenciar o estado de autenticação do usuário (autenticado ou não). 
2 - O componente de contexto `AuthContext.Provider` é usado para fornecer o contexto aos componentes filho e passa o status de autenticação atual e uma função para alterar o status de autenticação como o valor do contexto. 
3 - O componente `Child` usa o hook `useContext` para ler o contexto e exibe o status de autenticação atual. 
4 - O componente `Child` também renderiza um botão que, quando clicado, chama a função `setIsAuthenticated` para alterar o status de autenticação para true. 
5 - O componente `App` usa o componente de contexto `AuthProvider` para fornecer o contexto aos componentes filho e renderiza o componente `Child`. Dessa forma, o componente `Child` pode ler o status de autenticação a partir do contexto e alterá-lo quando necessário.
<br>
# Conclusão
O hook `useContext` é uma ferramenta útil para compartilhar dados entre componentes no React sem ter que passar manualmente esses dados como props a cada nível de componente. 
Ao criar um contexto com `createContext`, é possível fornecer o contexto aos componentes filho usando o componente de contexto `Context.Provider` e ler o contexto em qualquer componente filho usando o hook `useContext`. Isso pode ser útil para gerenciar o estado de aplicativos de forma mais eficiente e simplificar a propagação de dados em aplicativos de grande escala. 
No entanto, é importante lembrar de usar o `useContext` de maneira apropriada para evitar problemas de performance e manter o código organizado e fácil de manter.

---
Autor: Marcelo Schäffer Petry
[marcelopetry.com](https://marcelopetry.com)