Neste artigo, vamos te mostrar o funcionamento da Context API para manipular estados globais da aplicação. Para isso, faremos uma aplicação pequena para demonstrar o comportamento da context api nos componentes filhos. Acompanhe!

Neste artigo, vamos te mostrar o funcionamento da Context API para manipular estados globais da aplicação. Para isso, faremos uma aplicação pequena para demonstrar o comportamento da context api nos componentes filhos. Acompanhe! 
Curte React e gostaria de saber mais sobre? Ouça <a href="http://www.cms.dtidigital.com.br/entrechaves/entre-chaves-18-react-biblioteca-para-desenvolvimento-web/">esse episódio do Entre Chaves</a>
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#O-que-e-a-Context-API">1 O que é a Context API?</a></li><li><a href="#Porque-o-Context-e-util">2 Porque o Context é útil?</a><ul><li><a href="#O-React-context-API-e-um-gerenciador-de-estado-global-e-e-uma-funcionalidade-implementada-a-pouco-tempo-no-ecossistema-do-React-podendo-resolver-90-das-solucoes-do-Redux-de-forma-extremamente-simples">2.1 O React context API é um gerenciador de estado global e é uma funcionalidade implementada a pouco tempo no ecossistema do React, podendo resolver 90% das soluções do Redux de forma extremamente simples.</a></li></ul></li><li><a href="#Entendendo-a-Context-API">3 Entendendo a Context API </a></li><li><a href="#Vamos-iniciar-um-projeto-comnpxdoReact">4 Vamos iniciar um projeto com npx do React</a></li><li><a href="#Criando-oContext">5 Criando o Context</a></li><li><a href="#Entendendo-oUserContext">6 Entendendo o UserContext </a></li><li><a href="#Criando-nossos-componentes">7 Criando nossos componentes</a></li><li><a href="#PaginaForm">8 Página Form</a></li><li><a href="#Sobre-o-componente-filho">9 Sobre o componente filho:</a></li><li><a href="#Conclusao">10 Conclusão</a></li></ul></div>
<h2 id="e51c" data-selectable-paragraph="">O que é a Context API?</h2>
Em uma aplicação típica do <a href="https://pt-br.reactjs.org">React</a>, os dados são passados de cima para baixo (de pai para filho) via props, mas esse uso pode ser complicado para certos tipos de props (como preferências locais ou tema de UI), que são utilizadas por muitos componentes dentro da aplicação. Contexto (context) fornece a forma de compartilhar dados como esses, entre todos componentes da mesma árvore de componentes, sem precisar passar explicitamente props entre cada nível. 
Ou seja, no uso básico do React, quando precisamos que um componente filho tenha ou manipule os dados do pai, precisamos informar esses dados e funções nas props do componente filhos. O que é bem simples na prática: 
<img fetchpriority="high" decoding="async" src="https://miro.medium.com/max/597/1*EpDf977axRmFIHiZGwiSvA.png" alt="react context " width="597" height="423" />
<h2>Porque o Context é útil?</h2>
Dependendo do contexto, o conceito de estado pode ficar complexo à medida que é necessário compartilhar o estado dentro da aplicação de uma forma global entre os componentes. Para isso, algumas bibliotecas surgiram para resolver essa nova demanda, como o Redux e MobEx. O Redux é a biblioteca mais utilizada para gerenciamento de estados.
<h3><span id="O-React-context-API-e-um-gerenciador-de-estado-global-e-e-uma-funcionalidade-implementada-a-pouco-tempo-no-ecossistema-do-React-podendo-resolver-90-das-solucoes-do-Redux-de-forma-extremamente-simples">O React context API é um gerenciador de estado global e é uma funcionalidade implementada a pouco tempo no ecossistema do React, podendo resolver 90% das soluções do Redux de forma extremamente simples.</h3>
<h2>Entendendo a Context API </h2>
À medida em que o projeto vai se tornando maior, os estados começam a ficar confusos e, possivelmente, a confundir nossa cabeça, tornando necessária a organização dos estados. Uma forma de fazer isso é por utilizar estados globais, de modo que os componentes possam acessar e manipular o estado global sem grandes problemas. 
Quem nunca perdeu um bom tempo tentando entender de onde vêm e para onde vão os dados em nosso código? Junte-se ao time!!! 
Uma das grandes alternativas é usar a biblioteca do Redux . Contudo, o Redux faz mais sentido à medida que a aplicação toma proporções gigantescas e complexas. Quando isso acontece, é necessário aplicar padrões de projeto para facilitar a manutenção do código — o que não tira nossa responsabilidade de aplicar padrões em projetos menores.
&nbsp;
<h2>Vamos iniciar um projeto com npx do React</h2>
npx create-react-app context_api &#8211;template typescript 
Estrutura do projeto:
<figure id="attachment_15307" aria-describedby="caption-attachment-15307" style="width: 217px" class="wp-caption aligncenter"><img decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-24-166x300.png" alt="" width="217" height="392" /><figcaption id="caption-attachment-15307" class="wp-caption-text">estrutura de pastas do projeto.</figcaption></figure>
<h2>Criando o Context</h2>
Para criar nosso context, vamos utilizar o hook: createContext diretamente da lib do react. Como estamos usando o Typescript, o compilador nos força a passar os tipos que iremos usar: 
⦁ UserType: Tipos de dados que vão compor nosso estado global 
⦁ PropsUserContext: São as props do nosso context, que terão um estado e uma função para modificar o state do tipo React.Dispatch . 
⦁ DEFAULT_VALUE: O nosso valor default que passaremos para nosso context como parâmetro do hook createContext. Passamos o state com os dados zerados e uma função de inicialização. 
Veja o código abaixo:
<figure id="attachment_15308" aria-describedby="caption-attachment-15308" style="width: 465px" class="wp-caption alignnone"><img decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-25-245x300.png" alt="" width="465" height="569" /><figcaption id="caption-attachment-15308" class="wp-caption-text"><a href="https://github.com/devluispereira/context-api-example/blob/master/src/context/user/context.tsx">arquivo em src/context/user/index.tsx</a></figcaption></figure>
<h2>Entendendo o UserContext </h2>
Quando criamos um contexto através do createContext, podemos observar que recebemos 3 parâmetros no de retorno:
<figure id="attachment_15309" aria-describedby="caption-attachment-15309" style="width: 833px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-26-300x67.png" alt="" width="833" height="186" /><figcaption id="caption-attachment-15309" class="wp-caption-text"><a href="https://github.com/devluispereira/context-api-example/blob/master/src/context/user/context.tsx">arquivo em src/context/user/index.tsx</a></figcaption></figure>
<ul>
<li>Consumer : Um componente que assina as alterações de context. Isso permite que você assine um context dentro de um componente de função. Vamos substituí-lo pelo Hook useContext</li>
<li>Provider: Ele proverá o context aos componentes filhos da árvore.</li>
<li>displayName: Nos ajuda a melhor identificar o nome do context no devTools.</li>
</ul>
Agora, criaremos um componente React com nome de UserContextProvider: ele será responsável por retornar o componente UserContext com o seu Provider (portanto, UserContext.Provider ), que, por sua vez, envolverá os componentes filhos (children) da árvore do componente Pai. Esse componente receberá a propriedade value, o estado Global e a nossa função que modifica o estado.
<figure id="attachment_15310" aria-describedby="caption-attachment-15310" style="width: 736px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-27-300x163.png" alt="" width="736" height="400" /><figcaption id="caption-attachment-15310" class="wp-caption-text"><a href="https://github.com/devluispereira/context-api-example/blob/master/src/context/user/context.tsx">arquivo em src/context/user/index.tsx</a></figcaption></figure>
Por fim, exportamos por default o UserContext para usá-lo a fim de capturar o estado do context utilizando o hook useContext. Depois disso, o exportamos para o componente UserContextProvider que irá envolver nossa aplicação. 
Para utilizar o componente que criamos acima, geramos um arquivo na raiz da pasta src/context, chamado index.tsx.
<figure id="attachment_15311" aria-describedby="caption-attachment-15311" style="width: 814px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-28-300x94.png" alt="" width="814" height="255" /><figcaption id="caption-attachment-15311" class="wp-caption-text"><a href="https://github.com/devluispereira/context-api-example/blob/master/src/context/index.tsx">src/context/index.tsx</a></figcaption></figure>
O intuito desse arquivo é conter todos os contexts criados, que, no nosso caso, é apenas o UserContext. 
Agora, vamos envolver a nossa aplicação com o nosso context global no arquivo App.tsx . Você pode observar que importamos o arquivo criado acima com o nome de GlobalContext e envolvemos toda a nossa aplicação. Dentro do meu arquivo App.tsx , eu tenho apenas o módulo das rotas da aplicação que você pode ver clicando <a href="https://github.com/devluispereira/context-api-example/blob/master/src/router.tsx">AQUI.</a> 
Dentro desse módulo de rotas, teremos uma rota que usaremos para simular uma aplicação mais real. 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-29-300x184.png" alt="" width="683" height="419" />
<h2>Criando nossos componentes</h2>
Agora, criaremos os componentes que vão compor a nossa aplicação. A ideia é criar um componente Pai – a nossa tela de “form” e três componentes filhos: o ChildrenOne, ChildrenTwo e ChildrenThree. 
O componente Pai terá um formulário para dar corpo à nossa aplicação, uma vez que os componentes filhos exibirão todo nosso context e poderão alterar apenas um item de nosso estado global, exemplo:
<ul>
<li>ChildrenOne: Altera o nome.</li>
<li>ChildrenTwo : Altera o sobrenome.</li>
<li>ChildrenThree: Altera o e-mail.</li>
</ul>
Isso será interessante para observarmos o comportamento do context em cada um dos componentes filho. 
Para poder estilizar os componentes, utilizamos a biblioteca do <a href="https://styled-components.com/">styled-components</a>, devido a forma de estilização que ela usa:
<h2>Página Form</h2>
Vamos analisar o código abaixo: 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-30-233x300.png" alt="" width="502" height="646" /> 
Podemos observar que ocomponente FormData cria três estados com o hook useState do react, os quais servem para armazenar os dados de cada input. 
Se observar na linha 21, estamos usando o hook useContext para trazer a função que vai alterar o nosso estado, dando um apelido para ela de setGlobalState. 
Observe que definimos como parâmetro para o useContext o nosso context que estou exportando por default no arquivo src/context/user. Ele também retorna nosso estado, porém, não vamos usá-lo no componente Pai. 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-31-263x300.png" alt="" width="473" height="540" /> 
Esse é o código do nosso formulário que ficou oculto: três inputs que capturam o evento de onChange do input e alteram o estado local de acordo com o seu respectivo valor atribuído.
<h2>Sobre o componente filho:</h2>
Os componentes ChildrenOne, Two e Three é bem simples. Possui quase a mesma estrutura do nosso componente pai, no entanto, ele alterará apenas um campo do context global em cada componente. 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-32-181x300.png" alt="" width="516" height="855" /> 
Da mesma forma, importamos o hook useContext para resgatar a função de alteração do estado global e o estado global da aplicação. 
Obs.: poderíamos passar o estado como props do componente, mas o intuito aqui é demostrar a utilização do estado global em diferentes componentes da árvore 
Portanto, cada componente filho possui a mesma estrutura, possibilitando apenas a alteração de um campo por cada componente. 
O resultado dessa sopa é a tela abaixo, com a qual você pode interagir e acessar <a href="https://optimistic-jackson-5fa678.netlify.app/">clicando aqui.</a> 
Essa é a tela: 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-33-300x237.png" alt="" width="578" height="457" /> 
Vamos inserir algum dado no formulário e clicar no botão “Pronto”, para vermos a mágica acontecendo. 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-34-300x237.png" alt="" width="492" height="389" /> 
E veja que o estado foi refletido para todos os componentes num passe de mágica. (rs)! 
Mesmo sendo uma aplicação bem simples, observamos a grande facilidade que o context API nos traz. Como foi digitado o e-mail errado, vamos alterar no componente filho 3 e… 
<img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-35-300x232.png" alt="" width="676" height="523" /> 
Veja que refletiu nos demais componentes! 
Fique à vontade para baixar o repositório e fazer seus próprios testes. À medida que sua aplicação estiver crescendo, recomendamos começar a observar os padrões de projeto que são utilizados, como duck pattner.
<h2>Conclusão</h2>
O Context Api do React substituirá o Redux? Essa é uma pergunta difícil.
De fato, há razões que sugerem que oContext API seja melhor que o Redux: ele está embutido no React e, portanto, você não precisa de dependências extras de terceiros — um pacote menor e melhor manutenção do projeto são o resultado. A API também é relativamente simples de usar quando você pega o jeito. 
Recomendamos dar uma olhadinha nos seguintes artigos: 
⦁ <a href="https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/">React Hooks vs. Redux: Do Hooks and Context replace Redux?  </a> 
⦁  <a href="https://reactjs.org/docs/context.html">Context </a> 
Então galera, por hoje é só!
Trazemos mais informações técnicas em nosso podcast “Entre Chaves”. <a href="https://open.spotify.com/episode/2PqXhdkBE7rg16nhr2RyQ7?si=e14ca696ed564598">Clique aqui e dê o play!</a> 
<a href="https://open.spotify.com/episode/2PqXhdkBE7rg16nhr2RyQ7?si=e14ca696ed564598"><img loading="lazy" decoding="async" src="http://www.cms.dtidigital.com.br/wp-content/uploads/2021/04/MicrosoftTeams-image-36-300x75.png" alt="Entre Chaves" width="844" height="211" /></a>

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

Context API: como usar de forma simples e fácil

One-stop shop em tecnologia

Confira outros artigos