Como o ReactJS funciona? Entenda do React Hook Flow

Рет қаралды 1,239

13 күн бұрын

Faça parte dessa comunidade, seja MEMBRO DO CANAL! 👊🚀
Isso me ajuda demais a continuar trazendo conteúdo de qualidade! Muito obrigado de coração ♥️
---
O React Hook Flow define a ordem e a maneira como os hooks são executados dentro dos componentes funcionais do React.
Compreender essa sequência é crucial para evitar comportamentos inesperados e garantir que os hooks, como useState e useEffect, funcionem corretamente.
Erros comuns incluem a mudança na ordem dos hooks entre renderizações, o que pode causar bugs difíceis de rastrear.
Para dominar o React Hook Flow e escrever componentes mais robustos, assista esse vídeo!
---
✅ Curso de Next.js 13:
hotm.art/lA0ujDcw
📷 Segue lá no Instagram:
/ devjunioralves
💭 Participe da nossa comunidade no Discord:
/ discord
🧑‍💻 Repositório do canal:
github.com/jjunior96/dev-juni...
---
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
Signals no React.js?!
• Signals no React.js?!
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑‍💻 Blog: www.devjuniorplus.com.br
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jjunior96
📷 Instagram: / devjunioralves
👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #typescript #flow

Пікірлер: 14

@devjunioralves 11 күн бұрын

Lógica de Programação e Algoritmos com JavaScript: amzn.to/48Cj65Z JavaScript: O Guia Definitivo: amzn.to/48jh9vp Como ser um programador melhor amzn.to/48WYGVj Arquitetura Limpa (Clean Arch) amzn.to/3Viqw7v Clean Code amzn.to/3hHXVKY Estruturas de dados e algoritmos com JavaScript amzn.to/49FOzFd --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

@reicariri 10 күн бұрын

É muita, mas muita gente que usa React sem saber desse ciclo. Muito bom.

@devjunioralves 10 күн бұрын

Exatamente, o que pode gerar muitos comportamentos inesperados! Valeu demais 👊

@Leanst. Күн бұрын

Ajudou MUITO mesmo, em testes eu identificava este comportamento entre o cleanup e o run mas não entendia porque isso acontecia, o vídeo deixou totalmente claro. Valeu Dev Junior!

@sonhar122 10 күн бұрын

top! faz uns vídeos sobre organização do codigo/pastas dependendo do tipo de projeto xD. tipo se for um projeto que vai escalar, um projeto simples ou complexo. Sempre fico na duvida de quais pastas criar para separar cada tipo de coisa kkkk

@ricardobonin6717 Күн бұрын

TOpezeraaa!

@joezersmaniotto3103 3 күн бұрын

Muito bom!

@alanmarinho13 7 күн бұрын

Possivelmente é por isso que n está atualizando certo o estado authUser na minha função para verificar se meu meu usuário está autenticado quando ele entra no app (estou chamando um loadAuthStatus que tem uma pá de setState dentro de um useEffect)🤡

@devjunioralves 6 күн бұрын

Kkkkkk não faça isso, pois debugar nessas situações é quase impossível.

@websterrafael8978 11 күн бұрын

Salve, otimo video, pode me dizer o nome desse servidor q vc usa do lado do código? ?

@devjunioralves 10 күн бұрын

É um browser simples, chama Min. Valeu man 👊

@MordyDeep 9 күн бұрын

então resumindo: 1- Quando o componente é montado, primeiro de tudo é carregado os estados, depois os efeitos colaterais. 2- se eu precisa receber alguns dados que vem de por exemplo uma requisição fetch... é melhor jogar essa função fetch dentro do useState e retornar o valor. Ao invés de fazer isso dentro de um useEffect e dps jogar o valor em um useState, seria como dar uma volta "desnecessária"? peguei o código? KK

@MordyDeep 9 күн бұрын

como os estados vem antes da renderização, nesse caso os dados já estariam em tela quando o componente ser montado? 1 - isso faria a primeira renderização ficar travada em uma promessa por exemplo? se sim, então dependendo da quantidade de dados faz mais sentido continuar buscando no useEffect dps que a tela já é montada ( pela UX) ?

@MordyDeep 9 күн бұрын

pra resolver este problema eu preciso usar o padrão de fazer a requisição no componente pai e passar como props pro componente filho que seta essas props em um useState(() => {props})? Isso se for fazer alguma possível manipulação de estado, caso contrario nem precisa do useState, já que se as props alterarem através do componente pai, o filho também é re-renderizado, correto?