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.
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
:
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
:
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
:
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:
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
.
Aplicabilidades do useContext
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:
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
.
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:
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.
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.
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
.
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:
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.
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
Top comments (1)
@ IDURAR , we use react context api for all UI parts , and we keep our data layer inside redux .
Here Article about : 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux like Style) ⭐ : dev.to/idurar/mastering-advanced-c...