TUDO sobre o NOVO hook do ReactJS
Рет қаралды 14,028
4 ай бұрынVídeos complementares 👇
👉 ReactJS 19:
• NOVIDADES DO REACTJS 19
• E essa nova versão do ...
👉 Melhore a UX com React Suspense:
• Melhore a UX de aplica...
👉 Iniciando do zero com Next.js:
• Iniciando DO ZERO com ...
👉 A melhor feature do Next.js 14:
• Essa é a MEHOR feature...
👉 Trate os erros de forma profissional:
• TRATAMENTO DE ERRO DE ...
---
✅ 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 APLICAÇÕ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 #nextjs #typescript
@devjunioralves 4 ай бұрын
👉 Livros que recomendo muito: 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
@chlima88 3 ай бұрын
Cara a sua simplicidade e objetividade durante o video são espetaculares. Impossivel não dar like em um video desse. Parabéns pelo excelente trabalho!
@unknownsudo1685 3 ай бұрын
Muito interessante, será muito útil para a criação de custom hooks.
@M-scott 4 ай бұрын
Junior, seus vídeos são muitos bons. Parabéns cara.
@devjunioralves 4 ай бұрын
Valeu demais man! 👊
@eduardobertozi8506 4 ай бұрын
Sensacional! Como sempre, na frente com a informação hehe. Junior, vc poderia fazer uma série de clean architeture com Next14, seria bem legal :)
@devjunioralves 4 ай бұрын
Valeu demais!!! To estudando a possibilidade Eduardo, pq é um conteúdo bem raro ainda mais em portugues...
@eduardobertozi8506 4 ай бұрын
@@devjunioralves shooow!!
@tavaresevaristo 3 ай бұрын
tudo que voce ensina aqui é raro mano, entt estamos contigo. @@devjunioralves
@wandersondavid1695 3 ай бұрын
Show de bola
@edigarcarvalho4127 3 ай бұрын
Muito brabo!!!
@jsdev5362 3 ай бұрын
Boa!
@MatheusSilva-qm3ph 4 ай бұрын
Top!
@NoSb0r100 4 ай бұрын
Excelente! 🤙🤙
@devjunioralves 4 ай бұрын
Valeuuu 👊
@markus_dev_cwb 4 ай бұрын
Conteúdo Topzera!
@devjunioralves 4 ай бұрын
Valeu Markus!
@DouglasHartmann 4 ай бұрын
Fantástico isso!
@devjunioralves 4 ай бұрын
Simplifica bastante né
@jhowgama2024 4 ай бұрын
Muito show. Espero que eles implementem mais funções parecidas com o do useQuery., como o array de dependecia pra ficar escutando, cache, refetch, reload, isSuccess, isError e outros que são maravilhosos. Pq não adianta criarem esse hook, e ficar dependendo do useEffect pra fazer algum refetch, ou outra coisa com state. Com o useQuery, tem uma gama de funções muito bom.
@devjunioralves 4 ай бұрын
Seria interessante mesmo, porém, pelo menos nessa nova versão, eu não creio que a gente tenha essas features :(
@1pretom 2 ай бұрын
Uau
@isaacnewton2307 4 ай бұрын
eu mexendo em projetos antigos com class component, HOC e JS puro sonhando com as melhorias do React
@devjunioralves 4 ай бұрын
Kkkkkkkkkkkk nem só de novidades se vive o dev :(
@versaleyoutubevanced8647 4 ай бұрын
eu mexendo com RSC, use, sonhando em pegar um trampo mexendo com HOC E JS Puro so pra fazer um dinheir 😢
@jheanbrizadao2429 4 ай бұрын
🎉
@bpdev5546 3 ай бұрын
Mano onde eu encontro esse repositorio que vc usuou no video, nao achei no seu git, e parabens mano to apredendo muito contigo!
@jheanbrizadao2429 4 ай бұрын
😮😮😮😮
@_BruNNo 4 ай бұрын
Muito bom o conteudo! sempre trazendo novidades! Tenho uma duvida, esse hook atualiza sempre que o componente é renderizado novamente? por exemplo se eu faço uma ação de incluir um produto nessa lista de produtos, utilizando um modal, os meus produtos vão ser atualizados tambem?
@devjunioralves 4 ай бұрын
Valeuuu Bruno! Excelente pergunta, sim, até o presente momento. Pq pode ser que na versão 19 ele mude um pouco.
@renanlido_dev 3 ай бұрын
Parabéns pelo vídeo, muito bom mesmo! Se me permite, eu deixaria uma sugestão de melhoria apenas na parte da didática. Parabéns e continue em frente!!!
@devjunioralves 3 ай бұрын
Valeu man! 👊 Se tu puder exemplificar o que eu poderia melhorar, eu agradeceria muito.
@davidsylvestre928 4 ай бұрын
Tenho a sensação que está ficando muito mítico as coisas.
@devjunioralves 4 ай бұрын
Abstrações causam essa impressão mesmo, por isso é importante entendermos bem o que acontece por de baixo dos panos.
@davidsylvestre928 4 ай бұрын
@@devjunioralves Entendo que abstrações causem essa impressão, mas esse negócio de existir um arquivo em uma pasta e "magicamente" funcionar o error e loading é algo que não consigo ver com bons olhos
@caiohenrique1624 3 ай бұрын
Pra quem já trabalha a anos com isso é maravilhoso essa mágica
@jheanbrizadao2429 4 ай бұрын
Hook 😢🎉
@sampaio230 3 ай бұрын
Saindo um pouco desse ponto do novo hook.... nesse caso aí não seria melhor utilizar o React Query?
@guilhermemoriggi3617 4 ай бұрын
tem um repo desse codigo?
@rogercostadev 4 ай бұрын
Muito bom! Deixa te perguntar, vi que o seu editor tem umas transições suaves, é alguma extensão?
@victor-qe8pq 4 ай бұрын
É nativo do VSCode. Para ativar, basta adicionar " "editor.cursorSmoothCaretAnimation": "on" " ao arquivo de configuração
@rogercostadev 4 ай бұрын
@@victor-qe8pq Nossa, muito obrigado! Isso pra gravação de vídeo deixar muito mais bonito!
@devjunioralves 4 ай бұрын
Exatamente Victor!
@lucasdeandradeoficial 4 ай бұрын
Seria massa um vídeo Migrando de um projeto React 12 para a versão 14
@devjunioralves 4 ай бұрын
Seria do Nextjs 12 para o 14?
@lucasdeandradeoficial 4 ай бұрын
@@devjunioralves isso
@angelorubin1977 4 ай бұрын
Ta a cara do next 14
@devjunioralves 4 ай бұрын
Muitas abstrações...
@durighettoful 4 ай бұрын
Poderia me tirar uma dúvida a respeito dessa estrutura apresentada no vídeo que tem o useEffect e UseCallback? Gostaria de saber pq é feito dessa forma. Tipo eu tenho um useEffect com o fetchData como dependência, mas eu colocando o fetchData com o useCallback com um array de dependência vazio tbm não quer dizer que ele vai ser setado apenas 1 vez ? Qual a diferença de fazer dessa forma ou eu fazer um useEffect com array de dependência vazio e o fetch sem usar o useCallBack ?
@devjunioralves 4 ай бұрын
Excelente pergunta, nesse caso, o correto é adicionar a fetchData como dependência do useEffect e por consequência, tu vai precisar envolver a fetchData com useCallback, pois se não, vai gera um loop infinito de re-render. O useCallback previne que uma função seja recriada durante um re-render (processo chamado de memoization).
@durighettoful 4 ай бұрын
Eu consigo visualizar essa questão de ter que colocar o useCallback para evitar o loop, pois quando o componente renderizar a minha função fetch seria recriada então fazendo entrar no useEffect novamente. Até ai ok. Mas oque torna essa maneira mais correta do que usar apenas um useEffect com array vazio ? (que somente executaria uma vez ao criar o componente). Ou eu poderia usar qualquer uma das soluções sem que uma tenha alguma vantagem em relação a outra ? @@devjunioralves
@leonardoncintra 4 ай бұрын
Qual é esse plugin do vsCode que faz a linha amarela entre as chaves de fechamento try/catch if/else ?
@patrycksilva4440 4 ай бұрын
Agora isso é um configuração do próprio vscode, abrindo seu arquivo de configurações (settings.json, no meu caso eu só aperto Ctrl+shift+p e pesquiso "settings") basta você adicionar a seguinte linha: "editor.guides.bracketPairs": true,
@leonardoncintra 4 ай бұрын
valeu demais! Deu certao aqui@@patrycksilva4440
@devjunioralves 4 ай бұрын
Show Patryck!
@PauloJsx 4 ай бұрын
Opa, mano! Qual fonte tu usa no VS Code?
@devjunioralves 4 ай бұрын
To usando hoje em dia a JetBrains Mono
@JoaoGabriel-pk1ii 4 ай бұрын
Eu sinto que daqui a uns anos a gente só vai escrever código para estudar e entender o que acontece por baixo dos panos, na prática vai ser bem minimalista tipo esse use
@devjunioralves 4 ай бұрын
Sim, também vejo nesse sentido. Na minha opinião, é cada vez mais importante entender bem os fundamentos, pq existem tantos abstrações que usamos no dia a dia...
@TheWutachi 4 ай бұрын
Estava usando a versão Canary do next?
@devjunioralves 4 ай бұрын
Não, versão 14.1
@TheWutachi 4 ай бұрын
ty sir @@devjunioralves
@curd9524 3 ай бұрын
passa as configs do vs code moço ?
@devjunioralves 3 ай бұрын
Hehe Tem um vídeo aqui no canal onde mostro tudo que uso no meu VSCode, confere lá
@isaacnewton2307 4 ай бұрын
bora que eu to com fome
@devjunioralves 4 ай бұрын
Haha bora mano!
@Saulo.oSilva 3 ай бұрын
O que vejo no video de ruim, porque está explicando algo como se fosse algo do React (sozinho), porém está usando o loading no patterner do NextJS, o titulo do video poderia informar que está usando NextJS. O `use` é React, mas o loading é NextJS, a mesma coisa o error boundary .
@devjunioralves 3 ай бұрын
Como eu falo no vídeo, o Error Boundary e Suspense API NÃO é algo no Next.js, e sim do React. O Next.js 13+ apenas simplificou o uso desses conceitos que são do React. Inclusive, como eu também falo no vídeo, existem vídeos para ambos os conceitos, onde eu explico detalhadamente esses conceitos do React. Os links estão no comentário fixado.
@Saulo.oSilva 3 ай бұрын
Ótimo! Muitos, influenciados por um vídeo, passam a considerar o Next.js como a única maneira de desenvolver com React, o que pode gerar confusão. Isso é comum com a maioria dos bons frameworks que oferecem recursos impressionantes. O problema é que, embora um recurso de carregamento (loading) com o Next.js seja visualmente atraente, muitos desenvolvedores podem pensar que apenas o Next.js é capaz de implementar tal funcionalidade, sem perceber que é possível criar um recurso de carregamento eficaz sem necessariamente recorrer ao Next.js. (GPT melhorou o comentário hahahah)@@devjunioralves
超人夫妇
Рет қаралды 42 МЛН
Rocketseat
Рет қаралды 35 М.
Mark Maksi
Рет қаралды 3,4 М.
Техно Гарри
Рет қаралды 26 М.
Inter Link
Рет қаралды 1,1 МЛН
Typecase
Рет қаралды 10 МЛН
Brother-live_mob
Рет қаралды 749 М.
FISPECKT
Рет қаралды 220 М.