Context API vs Zustand - Guia de State Management no ReactJS

Подписаться 20 тыс.

Просмотров 13 тыс.

50% 1

Embora a Context API do React.js seja uma ferramenta muito útil para compartilhar states entre componentes, ela não foi projetada para ser uma solução completa de gerenciamento de estado (state management).
Nesse vídeo, você vai aprender por que a Context API do React.js não é um state management e por que você deveria utilizar o Zustand no lugar!
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 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:
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 #state #typescript

Опубликовано:

15 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 108

@devjunioralves Год назад

Quer se tornar um dev melhor? Leia esses livros: 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

@henriquebarros8303 7 месяцев назад

Dev Júnior, lembra do meu comentário em um outro vídeo seu? Então, o problema da renderização no App como um todo se deu muito provavelmente pelo mesmo motivo: Por ter colocado todos seus provedores centralizados. Isso nem de longe é uma boa prática! Se você separar corretamente acredito que você verá que ambos terão praticamente o mesmo comportamento. Refletindo um pouco mais além, pode ser que se você precisar que aquele seu STATE criado com Zustand tenha seu valor inicial definido de forma dinâmica, talvez você tenha que utilizar contexto da mesma forma, visto que o dado precisa vir de algum outro lugar (Um leve chute, já que não utilizei muito a ferramenta) "Ahhhh, Henrique. Mas se não for assim vou ter problema de performance porque vai ter renderização extra." Bem-vindo ao mundo React, onde o desenvolvedor tem que se preocupar com coisas desnecessárias desse tipo! Existem outras soluções além do React, como o Vue que é uma delicinha, o Angular com as novas atualizações, o Svelt Kit. Se é o que sua empresa definiu, existem abordagens menos drásticas como os signals. Mas ainda assim, meu conselho seria para ter cuidado ao utilizar ferramentas de terceiros dessa forma porque você acaba virando refém dela, certas vezes você aumenta a complexidade do teu projeto de forma nem tão benéfica assim. Sem falar que elas são substituídas periodicamente. É só olhar para ferramentas de estilização: Era um hyper tremendo no Styled Components, agora é o Tailwind! Essas coisas ficam obsoletas facilmente. Na maioria dos casos, o produto nem precisa ser um SPA. Por fim, vou deixar uma dúvida minha: Como funciona o garbage collector do Zustand?

@pthiago_s5075 Год назад

Pra editar a mesma palavra no arquivo inteiro: seleciona a palavra e ctrl shift L Extensão pra manter o case das palavras: multiple cursor case preserve Pra editar uma variável ou função e ela refletir em todos os arquivos onde ela é usada: seleciona a palavra e F2

@johnc0de Год назад

Salve Junior, parabéns pelo trabalho! Eu tenho acompanhado seus videos recentemente e tenho curtido bastante! Curto seus videos longos por darem um proximidade boa com a realidade! Gostaria de compartilhar 2 problemas pessoais que me atrapalham de ver mais conteúdos seus ( e talvez isso te ajude de alguma forma): - Eu tenho TDAH e isso faz com que eu perca a linha de raciocínio mt rapido, então talvez um mais acertivos nos pontos que quer mostrar me ajudaria bastante - Atualmente na minha rotina eu tenho muito pouco tempo então um video um pouco mais curto e mais estruturado ajudaria bastante a consumir suas dicas e conteúdo! Sei que é um pouco diferente da proposta do canal mas creio que consiga atingir os 2 públicos futuramente!

@devjunioralves Год назад

Sensacional seu feedback! Agradeço muito. Exatamente como você comentou, costumo fazer vídeos maiores pra de fato trazer ar um de realidade mesmo. Mas seu ponto é extremamente importante! Já tenho vários vídeos prontos, mas com certeza os vou gravar a partir de agora, vou levar em consideração seu feedback. A proposta do canal é trazer conteúdo sobre programação para todo mundo que queira aprender, então todos que se encaixam nesse nicho, são muito bem vindos!

@caiopereira9607 Год назад

Excelente vídeo Junior, sempre ouvi falar sobre o Zustand mas nunca tinha visto como funcionava na prática. Achei muito bacana e útil. Tem outra lib que ouço falar bastante também, se chama Jotai, você já pensou em trazer algum conteúdo sobre ela? Gostaria muito de ver um vídeo sobre com a sua didática.

@devjunioralves Год назад

Valeu demais Caio!!! Sim, conheço a Jotai, não usei tanto como a Zustand, mas posso trazer um vídeo sim.

@viperluan 3 месяца назад

Excelente conteúdo mano! Tenho acompanhado várias aulas porque tá muito bom mesmo.

@StephaniePharias-sv6he Год назад

Preciso consumir mais conteúdos seus, em um vídeo eu já aprendi MTA coisa, vários detalhes que eu não uso e faz total sentido usar, sem falar no foco principal do vídeo

@adrielsantana8929 Год назад

Estava esperando o vídeo, sensacional!

@devjunioralves Год назад

Que massa! Que bom que tu curtiu 👊

@ribeiro.evandro Год назад

Eu já conheço essa lib, mas não usei muito... Uma coisa que faltou, é sobre com trabalhar com persistência com a Zustand...

@MatheusHenrique-sk2od Год назад

ele tem um cara chamado persist (algo assim o nome) que você usa junto com o create ali

@devjunioralves Год назад

Exatamente como o Matheus disse, basta utilizar o persist. Nesse vídeo o objetivo era comparar o Zustand com a Context API, o Zustand tem mais funcionalidades interessantes. Posso trazer mais conteúdo sobre o Zustand aqui pro canal se vocês quiserem.

@VagnerMaltauro Год назад

muito bom seu conteúdo mano! Bem explicativo.

@devjunioralves Год назад

Valeu demais mano!!!

@bruno-dev Год назад

pow nunca tinha mexido com ela... parece ser mto top

@devjunioralves Год назад

Show de bola!

@nandoomb Год назад

Mas este problema de encadeamento de renderização só vai acontecer se você colocar o contexto acima de tudo… O ideal no caso é que você feche o seu contexto, mantendo apenas o componente de Users ou Products dentro dele. Em outras palavras, um context para cada “escopo”. Isso não te impede de ter também um context principal. Concordo que zustand é melhor, sou um grande fã da lib e já uso a bastante tempo, mas penso que valia a pena mostrar como corrigir o problema usando o próprio context api. Logicamente a esmagadora maioria ainda iria preferir o zustand, mas o que ficou parecendo é que a context api tem algum nível de “bug”. De todo modo, parabéns pelo trabalho, venho acompanhando a bastante tempo já. Grande abraço

@devjunioralves Год назад

Concordo com você, o que quis mostrar no vídeo é que a Context API e o Zustand são ferramentas para propósitos diferentes, a Context API não é um gerenciador de estados, já o Zustand sim. A grande maioria utiliza a Context API para resolver problemas onde ela não é a ferramenta ideal. Perfeito seu ponto. Grande abraço!

@nandoomb Год назад

@@devjunioralves Nesse ponto, perfeito! Valeu mano, TMJ 💪🏽

@devjunioralves Год назад

@@nandoomb Tmj 👊

@half7752 Год назад

Jr, faz um vídeo falando de todas as libs que você usa nos seus projetos, e de que forma você usa elas

@devjunioralves Год назад

Boa Rafa, excelente ideia!

@emanoelinfinity Год назад

Mano não conhecia a zustand, depois desse vídeo vou dar uma atenção.

@devjunioralves Год назад

Mano, recomendo bastante, acho ele bem simples e poderoso.

@maxwellalvesdesousa5153 Год назад

opa, parabéns pelo vídeo!, Contudo, queria fazer uma ressalva. O context não precisa tá na Raiz (APP). Na vdd, vc tbm poderia só te passado o context provider na pagina q vc quer, se vc passa no APP, logo, atualiza tudo, se vc tivesse passado na Home, acredito que esse problema só se refletiria na Home. Mesmo assim, o Zustand se torna mais vantajoso, por que ele encapsulo, logo, como os dois componentes que contém seu store (context) estão na mesma pagina, um não interfere no outro. PS: Foi só uma observação mesmo. Mas eu entendi sim o motivo do video.

@devjunioralves Год назад

Perfeito Maxwell! Concordo com você. De fato conseguimos passar um Provider para um conjunto específico, mas na maioria dos casos, passamos por volta da app inteira. E como você disse, mesmo assim, o Zustand ainda tem vantagem, até por que a Context API não é um state management já o Zustand é. Valeu pelo feedback!

@prosaka Год назад

Bom video! Parabens !!

@devjunioralves Год назад

Valeu demais!!!

@gabriel15559 Год назад

Muito bom o video, mas pelo oq eu percebi n serie ideal usar o Zustand sempre em vez da context? Se não qual seria os casos que a context "levaria a melhor"

@higorkkkkk4661 Год назад

Isso eu só vi na gringa em, obg!

@devjunioralves Год назад

Boa Higor! Quero trazer mais conteúdo avançado em português!

@lincolnruteski7158 Год назад

Mto bom, estou seguindo assistindo seus videos e estou gostando muito, estao me ajudando bastante. Vc poderia disponibilizar esse codigo pra estudo? que nele tem a comparação entre a context e o zustand, outra coisa, eu nao consegui enxergar na zustand como fazer chamada para API, no caso vc esta trabalhando com array, no context fica bem claro onde e como fazer isso.

@devjunioralves Год назад

Valeu demais Lincoln! Sim, vou disponibilizar, estou criando um repositório para colocar os códigos mostrados nos vídeos. Sobre sua dúvida, tu consegue passar qualquer função dentro de um state do Zustand, deixando assim global. Mas cuidado, pense bem se isso faz sentido e de fato é necessário.

@ivoneijr Год назад

muito bom mano!

@devjunioralves Год назад

Valeuuu mano!

@eduardoernestocorralesreyn7721 Год назад

Muito bom o vídeo para conhecer sobre o Zustand, porém não é justo falar da Context API como um vilão. O vídeo deveria começar pelo problema de usar a Context API para guardar estados em lugar de mostrar problemas de performance sem explicar que são artificiais devido a uma arquitetura deficiente (que é muito comum nos desenvolvedores iniciantes e temos que passar por isso para aprender de verdade). O gerenciamento de estados, como vc bem menciona no vídeo, o Zustand faz muito bem, mas nunca podemos esquecer do Redux (principalmente se queremos nos preparar para entrevistas de emprego no exterior). A Context API deveria ser usada para associar esses estados a seções muito específicas da aplicação (contexto), desse jeito isolando-as e impedindo que outras seções possam ver e/ou alterar esses estados. No teu exemplo específico, os contextos de User e Product deveriam ficar por volta somente dos seus respectivos componentes e não de forma global, desse jeito reduzindo as re-renderizações. Realmente comparar a Context API com o Zustand é injusto, porque seus objetivos são diferentes. E falando de gerenciamento de estado, vc já deu uma olhada no useReducer? Esse hook nativo do React resolve esse tema sem precisar de dependências externas. Na minha opinião somente é melhorado pelo próprio Redux. Nos meus projetos estou usando a Context API combinada com useReducer e funcionam perfeitamente. Daria para produzir um bom vídeo com essa ideia. Abraços

@_Alanfx 7 месяцев назад

A mesma desvantagem que ocorre quando envolve a aplicação inteira com um provider, também ocorre em componentes/paginas isoladas, haverá componetes rerenderizados sem necessidade.

@marco_glg 5 месяцев назад

Teria exemplos de arquiteturas eficientes? um projeto no github por exemplo.

@RB-jm7zd Год назад

Brabo demais!

@weslenfm Год назад

Uma dica de vídeo se é que vc tem e eu não vi rs, Quando usar useReduce, um gerenciador de estados no caso o Zustand ou apenas o useState ?

@Voit26 Год назад

Video top mano parabéns, outro problema que eu costumo ter com a contextAPI é que um contexto encapsulado dentro de outro não consegue usar o contexto do pai(o que não é um problema da API claro) e isso quebrou minhas pernas em vários projetos... O zustand me ganhou só por não precisar de um provider e nem ser tão complexo/verboso como redux! Uma dúvida, tu aprendeu a separar states e actions dentro da store com quem/onde? eu peguei esse habito a um tempo mas não consigo lembrar a origem kkkkkkk

@devjunioralves Год назад

Com certeza mano, concordo contigo. O Zustand é poderoso e simples de utilizar. Eu não lembro, mas faz tempo que separa assim kkkk Valeu demais mano!

@iuritorres 29 дней назад

cara, como você faz pra deixar o escopo ativo com destaque? Ex.: em 5:15 vc ta dentro do return entao ele ta sublinhando de rosa o return e a parte esquerda dele, pensei que fosse o tema, instalei o Illusion mas nao mudou aq

@frank511 Год назад

Seria massa um vídeo com setup de Sass, ainda tem muitas vagas que pedem ele

@devjunioralves Год назад

Boa dica Frank, pode sim trazer um vídeo sobre Sass.

@gustadev276 Год назад

Muito bom o vídeo!!! Me surgiu uma duvida, em quais casos vc usaria a context ou zustand ?. Tem algum cenário que a context se faz superior ?

@devjunioralves Год назад

Superior não, por que suas ferramentas para problemas diferentes. Existem situações que não seria necessário um state management, aí a Context API já resolveria, tipo resolver problema de prop drilling (tem vídeo aqui no canal falando sobre isso). Um toggle theme, a Context seria uma boa também.

@AntunesGean Год назад

Apesar de muitos não gostarem, eu sou fan do Redux e rtk, como ele se sai nessa questão. Nunca tinha imaginado isso de re-renderizar a cada mudança. Que bizarro!

@devjunioralves Год назад

Exatamente, é por que a Context API não é um state management, e usa-la como se fosse, pode trazer vários problemas de performance.

@matheusfrazao6465 Год назад

Muito bom vídeo, como sempre! Muito obrigado pelo conhecimento passado e meus parabéns pelo trabalho! Em relação ao Zustand encontrou problemas para integrá-lo com SSR, do Next por exemplo? Me lembro de passar por algumas dificuldades quando precisava de informações da store da aplicação para retornar alguma tela usando SSR, porém com o Redux isso é possível de se resolver através de Hydrate, e no caso do Zustand consigo esse compartilhamento de informações ainda do lado do SSR via Hydrate ou algo do tipo?

@devjunioralves Год назад

Valeu demais Matheus! E sim, conseguimos sim fazer algo parecido com o Zustand no Next.js. Inclusive (spoiler) é o assunto do vídeo que to preparando, por que no Next.js 13, com os server components, muda vários detalhes.

@adrielsantana8929 Год назад

@@devjunioralves esperando um vídeo detalhado sobre os async components e como utilizar melhor deles, tomara que sane minhas dúvidas

@devjunioralves Год назад

@@adrielsantana8929 Tu fala sobre os server components do Next.js 13? Quando tu transforma o componente em async, tu pode, por exemplo, realizar requisições à APIs dentro do próprio componente.

@igorsteixeira94 Год назад

Quem nunca teve problemas de performance usando ContextApi que atire a primeira pedra haha! Não conhecia essa lib, funciona em react-native tbm?

@devjunioralves Год назад

Com certeza haha Sim mano, funciona 100% Um combo interessante é a Zustand + React Query no react-native!

@romaosanches Год назад

Boa tarde Junior, tudo bem? Eu gostaria de tirar uma duvida, com a comparação que você fez da Context API x Zuztand, você explica que o Context API eu tenho que colocar em volta da aplicação toda, com isso eu consigo utilizar a funcionalidade de Context API em qualquer lugar, quando você mostrou com o Zuztand, você não precisou colocar por volta da aplicação inteira, mas com o Zuztand, eu tenho a mesma funcionalidade de ter para o app todo o compartilhamento do estado e das funcionalidades?, o Zuztand compartilha o estado com todos os componentes? Obrigado desde já, e o seu video é muito bom, conteúdo muito bom. Abraço

@devjunioralves Год назад

Fala Rodrigo, boa noite, tudo bem cara e com você? Exatamente, com o Zustand, tu compartilha os dados para toda a aplicação, só u chamar o hook e informar quando dado quer, como mostro no vídeo. Ele de fato é um gerenciador de estados, isso de forma global na aplicação.

@lucascoliveira3957 Год назад

Não entendi pq a context api substituiria um zustand, no Next 13, sendo que com o Zustand, vc resolve o problema de atualizar todos os componentes que estão dentro do mesmo contexto, quando esse contexto precisar ser atualizado. Pelo menos, eu uso o Zustand para conectar dois ou mais componentes, que não possuem ligação, poupando os irmãos e parentes desses componentes de serem atualizados, quando um desses precisa ser atualizado devido ao estado global

@devjunioralves Год назад

A Context API não substitui o Zustand Lucas, até pq ela não é um state management, já o Zustand é, como digo no vídeo.

@lucascoliveira3957 Год назад

@@devjunioralves mas pq no next13 não precisaríamos de um state manager? Sendo que um, como o Zustand, resolveria esses problemas que citei a cima. Como resolver eles sem o Zustand, usando a context no next13?

@devjunioralves Год назад

@@lucascoliveira3957 Boa pergunta Lucas, tem vídeos aqui no canal onde eu falo sobre isso. Explico uma forma interessante de utilizar a Context API no Next.js 13 e etc, confere lá, tu vai curtir.

@FogusReis Год назад

Booa, tudo beem?? tem uma coisa que não entendi, como ele obtem a informação para aplicação toda, imaginamos que eu faça uma função de signIn do cliente, na hora que ele fizer a função ja busca na api os dados do cliente na "/me" com get, e guardar no estado, até ok, mas como a aplicação toda vai ter acesso a esses dados vindos da api, sendo que não esta por volta da aplicação?

@gabrieldeoliveiraalmeida Год назад

Para salvar um Oobjet no Zustand, com o typescript devo usar Record ou Map?

@devjunioralves Год назад

Eu recomendo com Record.

@juninfortunato Год назад

Incrível, Qual o nome da extensão para mudar os ícones das pastas ???

@devjunioralves Год назад

Chama Symbols Icon, tem um vídeo aqui no canal onde mostro meus temas, configs e extensões no meu vscode, confere lá, tu vai curtir!

@thiagohflima Год назад

Off-topic: tenho tentado descobrir o nome desse tema de ícones há um tempo, podes falar? Parabéns pelos vídeos!

@devjunioralves Год назад

Mistério revelado: chama Symbol Icons kkkk Muito obrigado!

@thiagohflima Год назад

@@devjunioralves era esse mesmo, muito obrigado! 👊🏻

@devjunioralves Год назад

@@thiagohflima Show de bola 👊

@rodrigoelias1987 Год назад

Não conhecia essa lib, vou dar uma olhada nela depois. Junior, o que você acha do redux?

@devjunioralves Год назад

Boa, recomendo muito estudar ela. Sobre o Redux, na minha opinião, ele foi essencial quando foi criado, porém, hoje em dia, existem soluções mais simples que resolvem mais 90% das situações, não tendo necessidade de utilizar o Redux. Exemplo seria utilizar o Zustand + React Query. Salvo pouquíssimos casos que o Redux de fato é necessário.

@christoferluiz365 Год назад

@@devjunioralves Consegue me dar algum exemplo, seja de algum caso ou de alguma aplicação, onde o Redux seria necessário? Muito bom o vídeo, alias!

@devjunioralves Год назад

@@christoferluiz365 Em um projeto de larga escala, onde precise controlar vários estados globais complexos (exemplo: retornos de API). Ou, o mais comum de acontecer, projetos que já estão rodando e utilizam o Redux, pois na época, o único state management completo era ele. Espero ter conseguido responder sua dúvida. Muito obrigado Christofer!!!

@half7752 Год назад

uma duvida que me apareceu agora junior, em que casos seria necessário um state managment? por exemplo, no exemplo que você deu no video acho que um state lift up ja resolveria, quando eu precisar compartilhar estados entre componentes, qual seria uma boa hora pra encaixar o zustand e nao usar um lift up? o zustand ele deve ser usado somente como estado global ou tambem posso usar o zustand pra determinado "contexto"? por exemplo criar um templates/SpecifcPage/store, assim evitando o prop drilling entre os componentes criados nessa pagina, algo assim é errado? nesses casos seria melhor um lift up ou ate mesmo uma context api?

@half7752 Год назад

to com uma task pra resolver e consigo resolver o problema dessas duas formas, mas queria saber qual das duas seria ideal

@devjunioralves Год назад

É dificil responder assim Rafa, mas vou tentar pra te ajudar. Uma aplicação exigirá, geralmente, um state management, quando ela for de médio a grande porte, com vários componentes/telas que necessitam de compartilhar states complexos (por exemplo, dados vindos de uma api). A forma que tu disse, não ta errada, pois se os componentes que precisam dessas informações estao no mesmo nível e são filhos do mesmo componente pai. Se conseguir assim, não vejo a necessidade de um state management.

@jeffersoncarvalho2566 Год назад

O estado dos stores fica salvo de maneira global, igual no contexto? Por exemplo, se dentro do Card Products eu tiver a listagem de Users, quando atualizar e estado no Card de User, vai atualizar a listagem de Users em Products?

@devjunioralves Год назад

Pra efeito de entendimento, sim, é parecido com a Context API. E sim, se o state for o mesmo, se atualizar em um ponto da aplicação, ele será atualizado em todos os lugares onde estiver sendo utilizado.

@jeffersoncarvalho2566 Год назад

@@devjunioralves Não , mas eu tô falando 2 states diferentes, dois stores

@devjunioralves Год назад

@@jeffersoncarvalho2566 Não, se forem diferentes, nao atualiza. Ele só atualiza o store que sofreu alteração.

@jeffersoncarvalho2566 Год назад

@@devjunioralves Então não faz sentido comparar com a context api, porque ela serve pra compartilhar estados num contexto. Por exemplo, dentro do meu componente de Users, eu saber do estado atual de Products também

@devjunioralves Год назад

@@jeffersoncarvalho2566 A Context API não é um gerenciador de estados, como eu digo no vídeo. Eu comparei pois a galera tem bastante duvida em relação a isso, mas no vídeo mesmo comento que são ferramentas com propósitos diferentes.

@MatheusPereira-nn9dj Год назад

Esse comando que é relacionado ao crtl + shift + l que voce seleciona cada palavra que voce quer agrupar é muito legal , tem isso no windows ?

@devjunioralves Год назад

Acho que tem sim Matheus!

@lincolnruteski7158 Год назад

vendo o video uma segunda vez, estou pensando, com o redux acontece a msm coisa que acontece com o context? pergunto pq a base do redux é o context.

@devjunioralves Год назад

Não, o Redux possui "camadas" encima da Context API que possui um melhor controle.

@lincolnruteski7158 Год назад

@@devjunioralves entendo, e o zustend, substituiria sem problema algum todas as funcionalidades do redux em uma aplicação ?

@devjunioralves Год назад

@@lincolnruteski7158 Depende muito do projeto, mas creio que na esmagadora maioria dos casos, o Zustand é o suficiente.

@lincolnruteski7158 Год назад

@@devjunioralves fiz os testes com o redux aqui, ele faz a msm coisa que o context, quando atualiza uma coisa, ele atualiza toda a arvore abaixo dele,

@devjunioralves Год назад

@@lincolnruteski7158 Tu utilizando os selectors, isso acontece?

@gabrielfpp47 Год назад

Salve Junior, o que você acha do redux tk? Usei ele em um projeto e é super simples

@devjunioralves Год назад

Opa, salve Gabriel, tudo tranquilo man? Eu usei bem pouco o RTK, faz um tempo que não utilizo Redux no dia a dia. Mas de fato o RTK é simples, acho que ele tem sim suas utilidades, porém, eu mesmo, ultimamente, venho utilizando o Zustand.

@natanrce Год назад

Qual o tema do vscode?

@devjunioralves Год назад

Chama Illusion, tenho um vídeo onde mostro minhas configs, temas e extensões que uso no vscode, da uma olhada lá, tu vai curtir!

@SohaaTitanio Год назад

Gosto do assunto dos vídeos, mas são bem longos, as vezes desanima de ver e tornam se cansativos

@devjunioralves Год назад

Valeu demais pelo feedback, de verdade.

@mestihudson Год назад

Legal, mas você trapaceou. Na primeira solução vc usou uma única store para a app toda, quando foi usar o zustand vc criou uma para cada domínio.

@devjunioralves Год назад

Fala Hudson, tudo bem? Utilizando a Context API, não faz diferença, pois como os providers vão ficar por volta de toda a aplicação e ela não possui um "tracker" para cada state, assim que um alterar, tudo abaixo dela na hierarquia será re-renderizado. Seria sobre isso sua colocação?

@mestihudson Год назад

@@devjunioralves Exatamente. Obrigado pelo esclarecimento. Parabéns pelo trabalho.

@devjunioralves Год назад

@@mestihudson Opa, muito obrigado pelo feedback Hudson!!!

@wesleysousa3311 5 месяцев назад

Galera da Context e do Redux se doendo ai, viva o futuro, vida o Zustand kkkk Adeus context adeus redux

@marcoglg 5 месяцев назад

Mas se eu usar o context api como wrapper somente no componente que vai usar as props não daria no mesmo?😅

@ramonStones Год назад

Por que não sabe usar.

@devjunioralves Год назад

Como?

@devjunioralves Год назад

𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟: 7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7DhlW2HvztE.html Signals no React.js?! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eo1Zr99hC-4.html QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fXPBEKzd26c.html COMO APLICAR SOLID NO REACT - Inversão de dependência DIP ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-V1M39hKE_D8.html [ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n3R5lqF24gY.html TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Fj59V-ADBf8.html A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Js58PJuDPGY.html QUANDO NÃO UTILIZAR ESTADOS NO REACT? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uHxC8FH3l10.html MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7mKrr-BjJY8.html TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ekVlgxk7LLY.html A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Js58PJuDPGY.html