1 ano trabalhando com React

Published in

Pelando

5 min readFeb 15, 2021

Eu comecei a trabalhar com desenvolvimento web em 2015, logo quando me formei no curso técnico e entrei pra faculdade. De la pra cá foram diversas experiências que acumulei como programador: diversas libs, frameworks, task runners, bundlers e por aí vai…

Nos últimos anos, comecei a estudar bastante sobre bibliotecas SPA’s pelo fato do crescimento que elas tiveram no mercado e comecei a criar um desejo em trabalhar com elas. Foi aí que, em meados de 2019, o Pelando meu deu essa oportunidade e hoje estou aqui para contar pra vocês um pouco dessa experiência e tentar ajudar de alguma forma quem está começando.

Lib nova, bugs novos…

Pois é, lidar com erros faz parte da nossa profissão e isso não vai mudar. A dica de ouro que eu posso te dar é: não fuja deles. E isso vale pra qualquer linguagem, biblioteca, o que for que esteja começando. Copiar e colar uma solução do Stack Overflow é tentador no primeiro momento, pois tudo que você quer é ver sua feature funcionando, mas isso a longo prazo é uma prática insustentável.

Quando um erro aparecer, leia e entenda o que ele está querendo te dizer, isso vai fazer você se familiarizar com ele e buscar uma solução se tornará uma tarefa muito mais fácil.

Beleza, encontrou a solução? Entenda como ela resolveu, não simplesmente copie e cole. A satisfação de quando você entende a solução e implementa de uma maneira melhor ainda é muito boa e pra mim, me fez crescer muito profissionalmente e internalizar os problemas de forma mais rápida.

React Hooks e meus loops infinitos

Entrando um pouco no código, caso esteja iniciando com React em 2021, provavelmente vai ouvir muito sobre as Hooks que foram implementadas na versão 16.8.

Quando comecei a utilizá-las, as primeiras foram o useState e useEffect, e eu vou te contar, esses dois me fizeram tirar as calças pela cabeça. Era loop infinito atrás de loop infinito, o navegador travando, eu ficando maluco e demandas chegando…

Para exemplificar, vamos dar uma olhada nesse código:

Explicando um pouco o código, eu criei um componente que possui um estado chamado photos, em seguida utilizo o useEffect para fazer uma requisição à API e atualizar o estado com as novas fotos. Por fim, eu retorno meu componente com as imagens.

Ok, então vamos tentar seguir o fluxo de vida do componente e entender seus side-effects:

O componente é montado renderizado uma div vazia
Após a renderização, o useEffect é chamado, a requisição a api acontece e atualiza o estado.
Quando o estado é atualizado, acontece uma segunda renderização.
Após o re-render, o useEffect é chamado novamente.
Para o useEffect chamar a callback, ele valida se alguma dependência sofreu uma alteração.
No nosso exemplo, sim, o estado photos sofreu uma alteração referente a renderização passada. Antes ele era um array com uma foto inicial, agora ele possui também a resposta da api.
Isso faz o useEffect chamar a callback novamente, seguir todo o processo novamente e por aí vai...

Entendeu o ponto?

E ai vem a minha próxima dica: entenda o ciclo de vida de um componente. Estude! Entenda como as hooks trabalham juntas criando todo o ciclo. Entender todo o fluxo te ajudará muito em toda a sua jornada como desenvolvedor React e a sempre pensar em maneiras de tornar sua aplicação mais performática.

Beleza, mas como eu resolveria o problema anterior? Existem algumas maneiras , como por exemplo:

Definir o array de dependências do useEffect vazio. Dessa forma ele vai chamar a callback apenas na primeira renderização. Mas para fazer isso, eu preciso parar de fazer o spread de photos e pegar o estado anterior na callback do setPhotos. Dessa forma o código ficaria assim:

Outra dica que eu trago é: vai aos poucos com as hooks. Entenda bem o funcionamento do useEffect e useState que eu acredito que as demais, você vai aprender de acordo com a necessidade de uma futura implementação.

Ecossistema React

O React por si só é uma biblioteca de construção de interfaces. Mas o que acontece na prática é que para você criar um projeto novo utilizando React, você acaba adicionando algumas ferramentas e bibliotecas criando um ecossistema por volta dele.

Hoje existem diversas ferramentas que criam esse ecossistema, cada uma com sua particularidade. Cabe a você escolher a opção que faça mais sentido de acordo com suas necessidades. O React lista algumas opções, vale a pena dar uma lida e entender um pouco sobre o propósito de que cada uma.

Um ponto de atenção para isso é: tome cuidado em adicionar mais coisas do que precisa no seu projeto. Acaba que, pesquisando sobre bibliotecas que funcionam bem com o React, você quer utilizar simplesmente por isso e acaba adicionado complexidade onde não precisa. Não faça isso!! Além de aumentar o bundle da sua aplicação, isso pode te frustar e te fazer achar que React é complexo demais, mas não é.

Então a dica é: antes de querer adicionar uma lib nova, procure outras alternativas e faça um trade-off entre elas em relação a qualidade de código, produtividade e performance da sua aplicação.

Conclusão

O React com seu ecossistema é uma maneira muito produtiva e performática de desenvolver, mas também precisa ter uma mentalidade pragmática pra não complicar demais e querer montar uma bazuca pra matar uma formiga.

Eu espero que esse artigo possa ter acrescentado algo para você que esteja iniciando com os estudos e qualquer dúvida estou a disposição para trocar ideias. Valeu!

Github: https://github.com/luizchaves97

Referências

https://reactjs.org/docs/hooks-intro.html
https://blog.logrocket.com/guide-to-react-useeffect-hook
https://reactjs.org/docs/create-a-new-react-app.html
https://itnext.io/react-ecosystem-guide-4a5f85d17623