React básico: o useEffect p/ chamada de API
Aprenda de forma clara e prática como dominar o gerenciamento de estados e chamadas de API no React. Explore as melhores práticas para utilizar o hook useEffect e garantir alta performance em suas aplicações. Este vídeo abrange desde a explicação da diferença entre estados e variáveis tradicionais até a integração de chamadas de API de forma eficiente, proporcionando um conhecimento essencial para o desenvolvimento profissional em React. Aprimore suas habilidades e eleve seu nível de desenvolvimento com este conteúdo especializado.
- 00:00 💡 Explicação sobre a diferença entre um estado e uma variável normal no React
- O estado no React faz com que todo o componente seja renderizado novamente quando ele é alterado.
- O React possui um algoritmo de reconciliação para evitar a recriação desnecessária de partes do HTML.
- Não é aconselhável colocar chamadas de API diretamente no componente raiz devido às múltiplas execuções.
- 01:20 🔄 Utilização do hook `useEffect` no React
- O `useEffect` permite disparar uma função apenas quando desejado.
- É possível especificar quais variáveis devem ser monitoradas para a execução da função.
- É útil para evitar execuções desnecessárias, como em caso de mudança de estado específico.
- 02:15) 🌐 Chamada de API dentro do `useEffect` e atualização de estado
- É recomendado colocar chamadas de API dentro do `useEffect` para evitar execuções excessivas.
- Ao realizar uma chamada de API para obter dados, é essencial atualizar o estado com esses dados.
- Atualizar o estado corretamente garante a exibição precisa das informações na interface.
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
Пікірлер: 36
Traz o tutorial dessa integração do fastify com o swagger e o zod
Muito legal ... Concordo com o @ScoupYY ... Seria legal mostrar como faz para integrar a API + Swagger num projeto React ...
que coisa linda 😍
Eai Diego, blz? Sabe me dizer se com as novidades do React 19/Next 15, tem alguma forma mais interessante de lidar com paginação sem ser o useEffect ou ainda precisamos de algo como o React Query/SWR para facilitar isso? 🤔
@dieegosf
Ай бұрын
Uma boa alternativa é você salvar a página atual na URL como um Seach Param "?page=1" e usar isso na requisição da API e assim você não precisa nem usar o React Query se não quiser.
@AllysonTS
Ай бұрын
@@dieegosf massa, acho que já até faço isso no meu projeto com o React Query. 😂
Diego você poderia fazer um vídeo sobre Redux, mudou muito pelo visto, ou se não é mais utilizado também ok, sugestão só rsrs vlw
@tmcthyago
Ай бұрын
Não sei dizer o quão o redux ainda é usado, mas se quiser um gerenciador de estados global muito bom aconselho dar uma olhada no Zustand, tenho usado no meu trabalho e para fazer certas telas que tem muitos componentes se comunicando, sem ele seria um inferno.
poxa devia ter mencionado os problemas de fazer assim, principalmente quando tem parametro ( race condition )
Mas fazer chamadas API dentro do useEffect não tava “proibido”?
esse corte foi retirado das aulas da rocket ou de alguma live?
@dieegosf
Ай бұрын
Foi de um NLW! Inclusive teremos um novo NLW em breve, só dar uma olhada no site.
Onde vê a aula completa
@dieegosf
Ай бұрын
Isso foi parte de um NLW. Teremos um novo NLW em alguns dias, só dar uma olhada no nosso site.
Frist
Qual é esse tema??
Acho que a @rocketseat teria que redefinir oq seria avançado na trilha de React. É muito básico, superficial sei lá
@dieegosf
Ай бұрын
Hahaha, já alterei o título, saiu por engano
Duvido tu dizer como vc centraliza as janelas usando atalho
@DMNPlays
Ай бұрын
Se descobrir me fala kkk
@LeonardoAntonioGomesPereira
Ай бұрын
@@DMNPlays se eu não me engano, é do mac, "almost maximize"
@teliiz
Ай бұрын
@@LeonardoAntonioGomesPereira procurei sobre não achei nada man
isso não é avançado
@Alef-All
Ай бұрын
Também achei básico
@MarceloSousa
Ай бұрын
😂
@matheusbrauna102
Ай бұрын
é o básico do React kkk
@gabrel44
Ай бұрын
kkkkkk
@dieegosf
Ай бұрын
Já alterei o título, acho que o estagiário usou o GPT, só pode 🤣. Valeu por avisar!
Primeirooooo :)
avancado? KKKKKKK
@gustavobonfim7521
Ай бұрын
É o mesmo caso da trilha avançada da NLW que ensinam estados e conceitos básicos do React toda vez
@rogerbarreto2281
Ай бұрын
Meteram um "de forma brilhante" ainda
@dieegosf
Ай бұрын
Já alterei o título, acho que o estagiário usou o GPT, só pode 🤣. Valeu por avisar!
mano que tema é esse ai ??????
@rocketseat
Ай бұрын
kzread.infoQ1F5BPWHEFU