Usando o React Context API Facilmente

O que é?

Normalmente numa aplicação React, nós passamos informações através do componentes de cima para baixo, como um funil, através de props. Porém de acordo com a complexidade da aplicação e com a reutilização de componentes, esse envio de props pode-se mostrar totalmente ineficiente e confuso.

Usando o contexto, é possível criar uma área que compartilha todos os dados para os componentes pertencente à esse contexto e com isso diminuir e muito o envio das informações comuns à diversos componentes.

 

Quando usar?

Contexto (context como é descrito no React) é indicado para compartilhar dados dentro da área em comum que podem ser considerados “globais”. Normalmente alguns casos que nós usamos são usuário autenticado, idioma preferido ou valores que são pertencentes à mais de um componente da mesma árvore de componentes.

 

Como usar?

No exemplo do código a seguir, nós passamos um tema para a fim de estilizar o componente Header porém também vamos usar esse tema para estilizar o componente Footer.

 

Sem utilizar o contexto (context)

  • Note que tivemos que passar o tema do component APP para os components Header e Footer e depois repassar para os components HeaderButton e FooterLink
  • Se fosse necessário ter o tema em outros N components teríamos que repassar para eles também

 

Utilizando o contexto (context)

  • Note que agora declaramos o contexto no component APP e depois colocamos todos os components abaixo dele como filhos deste contexto
  • Feito isto basta chamarmos “static contextType = ThemeContext;” para ter acesso ao contexto em qualquer component que esteja na árvore do <ThemeContext.Provider … >
  • Assim fica mais fácil propagar um contexto porque não precisamos ficar repassando ele de pai para filho através da árvore de components

 

Considerações finais

O Context veio como solução para gerenciamento de informações que são muitas vezes usados, dentro de um contexto específico, porém ele não foi feito para substituir um gerenciador de estados como MobX ou Redux e sim complementa-los.

O principal objetivo do Context é evitar o props drilling, ou seja, vazamento de props que é exatamente o envio de props por diversos componentes, porém para gerenciamentos mais complexos e de diversas informações e ações ao mesmo tempo, vale considerar o uso de uma biblioteca como o Redux ou MobX para te auxiliar nessa tarefa.

Existem duas situações que a equipe do React não te recomenda utilizar o Context, a primeira delas é quando você precisa passar a informação adiante uma vez ou poucas, sem muitas complexidades. E por ser algo tão simples, você não deveria se preocupar com o Context e a outra situação é quando o compartilhamento torna a reutilização dos seus componentes tão difíceis que você também não deveria utilizar somente o Context e sim um gerenciador de estados também.

Documentação oficial do Context – React

Uma outra forma para compartilhar estados no React (mais próxima ao Redux porém mais simples) é usar o Recoil, nós temos um excelente post aqui no OneBitCode mostrando exatamente como usando o Recoil no seus APPs: Recoil: Gerencie estados no React facilmente (passo a passo)

Obrigado por ler este artigo, se você gostou dele, compartilhe com seus amigos, isso nos ajuda e motiva a levar mais conhecimento a mais pessoas. Se você quiser contribuir com sua opinião, estarei de olho nos comentários, 👀.

 

Até a próxima e um grande abraço.
Matheus Mello

 


Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!


O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

 

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

 

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

 

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
E
stamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

5 1 vote
Article Rating
setembro 4, 2020
Subscribe
Notify of
guest
3 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Paulo
Paulo
22 dias atrás

Legal mas muito batido, todo mundo faz esse exemplo. Seria legal um exemplo realmente mais próximo do dia a dia

Andrecio
Andrecio
21 dias atrás
Reply to  Paulo

E com hooks, afinal é o que vale agora

Matheus
Matheus
14 dias atrás
Reply to  Paulo

Muito obrigado pelo comentário, será feito 😉

Feito com s2 por OneBitCode
3
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: