A Context API é um state management?! A forma CORRETA de utilizar a CONTEXT API do React.js
Вставка
- Опубліковано 20 жов 2024
- INFORMAÇÕES IMPORTANTES 👇
Participe da nossa comunidade no Discord:
/ discord
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
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:
Como ser um programador melhor
amzn.to/3POQ5fq
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
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.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho 26 anos e moro em Goiás. Eu compartilho todo tipo de conteúdo relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #context #hooks #state #javascript #typescript
Livros para dar o próximo passo como dev:
Código Limpo
amzn.to/3hHXVKY
Como ser um programador melhor
amzn.to/3POQ5fq
Arquitetura Limpa
amzn.to/3Viqw7v
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
Nossa, eu estava pesquisando hoje de manhã sobre esse assunto e seu vídeo saiu bem agora, agorinha, acerca disso. Muito obrigado! Hora de ver cada segundo do vídeo e absorver tudo, tic tac...
Haha massa!
Vai ter mais conteúdo sobre state management, vou trazer sobre o Zustand que é sensacional.
Poderia fazer um vídeo de como testar um componente utilizando o zunste, eu achei complicado
@@CarlosEduardo-gi4xf Boa, posso trazer sim!
Conteúdo muito bom, sua didática é incrível
Valeu demais man! Que bom que tu curtiu!
Parabéns cara! É o melhor conteúdo sobre Next, React que eu já vi aqui no UA-cam.
Muito obrigado por esse vídeo. Seu conteúdo é ótimo!
Muito boa as dicas, já sou fã. Poderia fazer um vídeo mostrando as extensões do vsCode que você utiliza ??
Opa man, muito obrigado!!!
Já tem um vídeo onde mostro minhas extensões, configs e temas haha
Da uma olhada no canal aí, tu vai curtir.
Ficou show, mas uma dica pras próximas, mesmo que esteja usando o next, mosta como seria a integração no React puro pro exemplo ficar completo.
E mano, realmente gostei muito do seu vídeo, só notei que você passou o value diretamente como props. Acredito que a maneira mais correta de faer isso é usando um useMemo, para evitar re-renderizações desnecessárias, mas fora isso, shooow de bola demais
Boa!
O áudio de todos os vídeos é um pouco baixo. Sugiro que vc aumente um pouco (adicione um compressor de audio). Canal muito bom. Parabéns.
Valeu pelo feedback Leopoldo! Eu gravo sem edição, mas vou aumentar sim, valeu demais!
cara, achei incrivel sua aula, tava procurando mt sobre como usar e elencar varios context numa msm aplicação, to caindo num erro de out of range...
outro ponto, se possivel me diz que extensão é essa que voce usa que mostra a identanção de uma função e o que mostra o retorno do console do navegador no proprio vscode
Fala Jr! Parabéns pelo conteúdo, venho acompanhando suas dicas e vem agregando cada vez mais conhecimento em next.
Porem sempre haverá duvida já que sou novato em next kkkk. Por ter essa questão de server side e client.
Criando por exemplo uma context de auth, se salvar as info no localstorage ficará no client certo? e no lado do server side?
abraço camarada!
Fala Wallison! Valeu demais meu camarada, de verdade!
Sobre a perguntar, sim, localStorage é somente do lado do client, no lado do server, não temos acesso a ele. Para salvar dados no client e ter acesso no server, tu pode utilizar os cookies.
@@devjunioralves Valeu pelo retorno. Ou seja se eu crio uma aplicação que a única rota pública é a login, o ideal é a utilização dos cookies. Mais uma pergunta pra concluir kkk, pra autenticação e rotas privada context api ou next-auth?
@@WallisonMouraDev Como você ta usando o Next.js, faça a verificação do usuario logado no server side.
Se tu tiver um backend proprio, talvez não faça sentido usar o Next Auth.
Conteúdo Excelente
Valeu Cristian!!!
Salve! Cara eu tenho uma dúvida no NextJS e gostaria da sua ajuda.Eu tenho um componente servidor que é uma das rotas da minha aplicação, ele é responsável por mostrar a lista de episódios de um curso, como eu estava usando localStorage para guardar o token de autenticação, sempre tinha que fazer as chamadas da api em um componente cliente. Tem como de alguma forma, eu passar um contexto de um componente cliente para um componente servidor? no sentido que o componente cliente seria filho do componente servidor.
cara o conteudo do canal é sensacional mas eu sempre quebro com essa intro, parece que eu to abrindo um video de minecraft de 2011 kkkkkkk
Kkkkk eu corrigi isso já faz um tempo, então os vídeos não assustam com a intro mais 😂
Mas toda vez que mudo de página perco esse valor, tem como ser definido uma vez e não ser perdido?
Aqui está a correção do seu texto:
"Dev Junior no Next.js 14: quando utilizamos o `provider` na pasta `layout`, temos que transformar o componente em 'use client'. No entanto, o Metadata do Next precisa ser renderizado no lado do servidor (server-side). Acabei tendo que desabilitar o Metadata. Já se deparou com alguma solução simples para isso? Grato!"
toda semana estou nesse video... parece que nao entra na minha cabeca como funciona
Grande dev Junior, fiquei na dúvida com relação ao fragment que vc passou no time -> (4:03) no children. vc disse que não é necessário, mas fez uso dele, tem um motivo?
Não, apenas costume mesmo kkkk
Por que no final, o Fragment não vai gerar um node extra no DOM, então não faz diferença, nesse caso, utilizar ou não.
@@devjunioralves Vlw Dev Junior.
Jr, não sei se alguém já comentou, mas quando a gente tá com o som um pouco mais alto, o som da intro é muito mais alto que o som da tua voz. Quase caí da cadeira do susto que levei pq o som tava alto e eu não tinha percebido kkkkkkkkkkkk
Sim, já comentaram kkkkk
Peço desculpas por isso, eu corrigi já, inclusive modifiquei a intro, porém, alguns vídeos já estavam gravados.
Mas muito obrigado pelo feedback!!!
Muito bom! O que fazer quando um contexto depende um do outro?
Sendo que, tem funções e estados que o QueueContext pega do PlaybackContext e funções e estados que o contexto PlaybackContext pega de QueueContext.
Antes eles estavam tudo juntos e agora estou com esse problema, não sei qual é a melhor solução pra esse caso.
Ex:
// playerRef
// isPlaying, isMute, handleVolume, handlePlay, mais alguns estados e funções ...
// queue, currentTrack, getQueue, mais alguns estados e funções ...
Nesse caso, seria interessante não haver essa dependência dupla. Poderia criar um novo contexto que englobaria tudo e seria uma fonte para os demais.
Mas recomendo estudar a possibilidade de ter um state management, pois poderia ser uma opção melhor.
@@devjunioralvesInteressante, já ouvi falar sobre state management, tem vídeo sobre no canal?
@@kataik_ Eu já gravei, mas vai sair essa semana aqui no canal!
@@devjunioralves show, vou ver algo sobre e complemento com o vídeo. obrigado, seu canal é muito bom!
@@kataik_ Muito obrigado!!!
Oi
Qual a extensão do vscode para exibir o resultado do consolelog ao lado da linha em azul?
Console Ninja
pra auth é preferível a context do que o zustand?
Se for só autenticação, na minha opinião, a Context API já suprime bem. Caso precise um um state management, aí a Context API não é o indicado.
Video muito massa, mas ultimamente o sua voz está baixa
Valeu pelo feedback man! Realmente, eu já corrigi isso nos vídeos, esse já estava gravado. Mas os próximos estão com o áudio melhor!
O Next 12 tem suporte para context api ??
Com certeza, tem sim!
@@devjunioralves cheguei a pouco tempo no seu canal e tenho maratonado seus vídeos. Os conteúdos são demais e ajudam muito e com uma didática impecável. Parabéns!!!
Estou começando a pouco com Next e tenho muitas duvidas que tem sido sanadas através dos seus vídeos.
Tenho uma outra duvida , se me permite, é possivel fazer requisições api fora da pasta pages sem necessariamente usar SSR ou SSG ??
Valeu abraços !!
@@friolis1 Cara, que massa saber disso! Show demais que os vídeos estão te ajudando.
Sobre sua dúvida, se entendi bem, até a versão 12 não tem como (SSR é apenas na pasta pages).
No Next.js 13, temos a pasta app que muda tudo.
Agora, tu pode fazer requisição utilizando o useEffect (não é o mais recomendado).
Inclusive tem um vídeo no canal onde falo em detalhes uma alternativa ao useEffect para requisições HTTP.
@@devjunioralves Seria uma opção usar o react-query nesse caso ao inves do useeffect ?
@@friolis1 Com certeza!