👉 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
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.
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!!!
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 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
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 ?
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).
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
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,
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
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...
Atualmente o "use" só é suportado em componentes de servidor. então fica ligado ae quem tiver estudando recentemente. "A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework."
Na realidade, o "use" não é suportado em server components, assim como os demais hooks do React. Em RSC, você pode/deve utilizar o server pra fazer suas requests.
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 .
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.
Ó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
👉 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
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!
Muito interessante, será muito útil para a criação de custom hooks.
ainda não tinha ouvido esse hook. Sensacional. Preciso ficar mais ligado as novas features do react.
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 :)
Valeu demais!!!
To estudando a possibilidade Eduardo, pq é um conteúdo bem raro ainda mais em portugues...
@@devjunioralves shooow!!
tudo que voce ensina aqui é raro mano, entt estamos contigo. @@devjunioralves
Junior, seus vídeos são muitos bons. Parabéns cara.
Valeu demais man! 👊
eu mexendo em projetos antigos com class component, HOC e JS puro sonhando com as melhorias do React
Kkkkkkkkkkkk nem só de novidades se vive o dev :(
eu mexendo com RSC, use, sonhando em pegar um trampo mexendo com HOC E JS Puro so pra fazer um dinheir 😢
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.
Seria interessante mesmo, porém, pelo menos nessa nova versão, eu não creio que a gente tenha essas features :(
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!!!
Valeu man! 👊
Se tu puder exemplificar o que eu poderia melhorar, eu agradeceria muito.
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?
Valeuuu Bruno!
Excelente pergunta, sim, até o presente momento. Pq pode ser que na versão 19 ele mude um pouco.
10:51 isso aqui me da uma raiva sem explicação, ficamos tentando achar o erro que nao existe, tudo pq temos que encerrar o processo.
Mano onde eu encontro esse repositorio que vc usuou no video, nao achei no seu git, e parabens mano to apredendo muito contigo!
Fantástico isso!
Simplifica bastante né
Conteúdo Topzera!
Valeu Markus!
Tenho a sensação que está ficando muito mítico as coisas.
Abstrações causam essa impressão mesmo, por isso é importante entendermos bem o que acontece por de baixo dos panos.
@@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
Pra quem já trabalha a anos com isso é maravilhoso essa mágica
Seria massa um vídeo Migrando de um projeto React 12 para a versão 14
Seria do Nextjs 12 para o 14?
@@devjunioralves isso
Muito brabo!!!
Saindo um pouco desse ponto do novo hook.... nesse caso aí não seria melhor utilizar o React Query?
Excelente! 🤙🤙
Valeuuu 👊
Muito bom! Deixa te perguntar, vi que o seu editor tem umas transições suaves, é alguma extensão?
É nativo do VSCode. Para ativar, basta adicionar " "editor.cursorSmoothCaretAnimation": "on" " ao arquivo de configuração
@@victor-qe8pq Nossa, muito obrigado! Isso pra gravação de vídeo deixar muito mais bonito!
Exatamente Victor!
Top!
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 ?
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).
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
Show de bola
Qual é esse plugin do vsCode que faz a linha amarela entre as chaves de fechamento try/catch if/else ?
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,
valeu demais! Deu certao aqui@@patrycksilva4440
Show Patryck!
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
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...
Ta a cara do next 14
Muitas abstrações...
passa as configs do vs code moço ?
Hehe Tem um vídeo aqui no canal onde mostro tudo que uso no meu VSCode, confere lá
Boa!
Opa, mano! Qual fonte tu usa no VS Code?
To usando hoje em dia a JetBrains Mono
Estava usando a versão Canary do next?
Não, versão 14.1
ty sir @@devjunioralves
Uau
😮😮😮😮
Hook 😢🎉
🎉
Atualmente o "use" só é suportado em componentes de servidor. então fica ligado ae quem tiver estudando recentemente. "A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework."
Na realidade, o "use" não é suportado em server components, assim como os demais hooks do React.
Em RSC, você pode/deve utilizar o server pra fazer suas requests.
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
.
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.
Ó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
bora que eu to com fome
Haha bora mano!