O gerenciamento de estados por meio do Redux do React é bastante conhecido. Uma das principais razões disso é que ele performa muito bem em aplicações de alta complexidade, facilitando a manutenção do código com o auxílio dos componentes. No entanto, o Redux não é tão eficiente em algumas situações, o que torna o Context API uma solução mais viável.
Ao longo deste artigo, vamos explicar mais a fundo em que cenário é melhor usar o Context API no lugar do Redux. Além disso, você conhecerá os benefícios dessa solução e entenderá como desenvolver um projeto com ele. Acompanhe!
O que é Context API?
Quando falamos de Context API, estamos nos referindo a um meio mais efetivo de compartilhar dados em uma aplicação web. Na prática, certos projetos de baixa e média complexidade requerem o gerenciamento de estados globais.
Uma das principais características do React é a herança entre os seus componentes. Em outras palavras, os dados contidos em um componente pai são transmitidos aos componentes filhos, sendo algo proporcional à complexidade de uma aplicação.
Imagine um negócio que possui um site de e-commerce, com diversos botões e itens em que os usuários inserem dados. Quanto maior o número de páginas dessa loja virtual, mais será necessário manter algumas informações durante a navegação do usuário.
Quando alguém faz login na sua conta da loja virtual, é interessante manter o nome desse usuário em todas as páginas. Este é um exemplo simples de estado global, que pode também ser visto em relação a um tema específico do site, que deve se manter durante toda a sessão de usuário.
O desafio central é o seguinte: via de regra, componentes filhos não podem acessar dados de nós que estão no seu mesmo nível de hierarquia. Da mesma forma, o componente pai não tem acesso aos estados internos de um filho.
Dito isso, a ideia do Redux e do Context API é reduzir esse nível de hierarquia. Sem essas soluções, fica mais difícil proceder com manutenções e reuso de um código.
-
O Context API pode ser usado em procedimentos envolvendo:
- configurações de temas;
- armazenamento de dados de formulários;
- autenticação.
Como funciona o Context API?
Se você já trabalha com React, a biblioteca Context API fica prontamente disponível. O começo de tudo está em uma função responsável por inicializar o gerenciador de estados globais. Na prática, será usada uma solução que armazena estados compartilháveis, bem como “escutar” quaisquer mudanças de estado.
Inicialmente, é declarado um context no código. No entanto, é preciso que ele fique visível aos outros componentes e tenha estados que possam ser compartilhados. Nesse sentido, a ideia é usar um arquivo chamado src/App.js para proceder com essa configuração de visibilidade e estados.
Por que ele é útil?
Considere, por exemplo, os estados representando nome e idade de um usuário. Para acessar e alterar esses dados, é preciso uma função chamada set. A ideia desta é realizar atualizações de estado sempre que houver algum evento, como um clique que leve o usuário a uma outra página de sua conta.
Também é preciso exportar um componente que fará o papel de “pai”. A ideia é que funcione como um provedor de estados aos nós filhos no decorrer da aplicação.
Quais seus benefícios?
Quando o código é simples, existe pouco ou nenhum gerenciamento de estados. No entanto, conforme essa complexidade aumenta, cresce também o nível de aninhamento de componentes, exigindo algo capaz de diminuir um pouco a limitação de acesso de um nó em relação ao outro.
Gerenciador de estado global
O Context API evita um problema chamado nesting, que ocorre quando os componentes estão dentro de outros no código. Em outras palavras, o gerenciamento de estado global tem relação direta com a redução na dependência entre os componentes, configurando uma boa prática de projeto.
Agilidade
Quando o Context API resolve o problema da hierarquia no React, ganha-se mais agilidade. A razão disso é que a solução evita a passagem manual dos dados entre os componentes pai e filho.
Imagine agora a manutenção do site. Quando se usa uma solução como o Context API ou o Redux, o procedimento se torna menos demorado. Quanto menos dependência houver entre os componentes, mais ágil será a manutenção, deixando o site e suas funcionalidades indisponíveis por menos tempo.
Funcionalidade
Quando o código tiver uma complexidade média ou baixa, é preferível usar o Context API ao Redux. Com ele, o projeto fica mais funcional, organizado e claro.
Como desenvolver um projeto com o context API?
Agora que você entendeu o básico do funcionamento e serventia do Context API, vamos mostrar como é desenvolvido um projeto com ele. Além dos dados e funções de modificação do estado, é preciso também usar um valor padrão que será passado ao contexto como parâmetro.
A criação do contexto implica em três parâmetros de retorno, que são:
- Consumer: responsável pela assinatura de alterações no contexto;
- Provider: fornece o contexto aos nós filhos:
- DisplayName: usado para identificar o nome do contexto no devTools.
Vamos supor que sejam criados três componentes: filho1, filho2 e filho3. Para completar, será criado um componente pai, que pode ser um formulário de landing page, por exemplo. O componente filho1 vai alterar o nome de usuário, filho2, o seu e-mail, e o filho3, a profissão dessa pessoa — uma informação que costuma ser solicitada em páginas de captura.
Depois de codificar, o resultado deve ser a inserção dos dados no formulário (pai) se replicar nos componentes filhos. Caso o usuário digite o e-mail errado e queira consertar, quando ele salva a inserção, todos os três filhos são atualizados. Do contrário, o procedimento seria mais manual e dispendioso do lado de quem desenvolveu o projeto, dada a problemática dos aninhamentos e, por consequência, a pouca clareza do código.
O Context API é uma alternativa interessante ao Redux do React. Como falamos, ele oferece como gerenciamento de estados globais otimizado, além de agilizar o acesso e atualização dos dados entre os componentes. Dessa forma, torna a hierarquia do React menos engessada.
O que achou do texto? Continue no blog e confira um guia prático sobre API REST com Node!
