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