Tive um problema com Zustand em um app que manipula e persist grande quantidade de dados. Aparentemente o middleware de pesist do zustand ainda não é tão eficiente. Então tomem cuidado na hora que forem usar a ferramente dependendo da sua aplicação, vai pecar na performance. De resto, é uma ferramente boa! Provavelmente vou usar o jotai pra resolver esse problema ai.
Sensacional sua didatica. Não conhecia o zustand mas agora vou começar a praticar e talvez posteriormente utilizar nos projetos futuros com clientes. Valeu!
Parabéns pelo video. Dando um pouco mais de overview, o atomic selector como vc mencionou ele detecta alterações com igualdade estrita (antigo === novo) por padrão, isso já é eficiente e otimizado. Algumas pessoas preferem assim. Mas se quiser criar um objeto único dai o recomendado é o uso do useShallow para evitar renderizações desnecessárias. Ex: // Ok fazer assim e recomendável const foo= useBearStore((state) => state.foo); const bar= useBearStore((state) => state.bar); // Se quiser juntar tudo dai melhor usar assim import { useShallow } from 'zustand/react/shallow'; const [foo, bar] = useBearStore( useShallow((state) => [state.foo, state.bar]) ); Zustand é muito bom. 😀
Visto isso, aprendam Redux ainda assim, é o padrão de mercado. Sensacional vídeo. Acho que o pessoal do Zustand tbm são os criadores do Jotai que é uma outra boa alternativa, porém mais simples.
Acho que so procuraria aprender redux se eu fosse aplicar pra alguma empresa que tenha, graças a Deus a empresa q eu trabalho a gente usa zustend e os freelas que faço eu uso zustend ^^, mas é verdade no mercado tem mt projeto em redux ainda!
Cara incrível inclusive eu tive que usar o rxjs justamente pra pegar o estado de outra instância do react. Se soubesse dessa lib teria usado ela. Parabéns 🤝🏻🤝🏻
Mano, quanto estresse eu passei pra aprender e implementar redux! Implementei no meu projetinho pessoal e funcionou de primeira e muito fácil. Obrigado por compartilhar.
Em uma aplicação escalável, como você sugere organizar os arquivos? Separar as requisições assincronias à API em um outro arquivo (services.ts)? um arquivo para os types?, etc
como fica usando isso em varios lugares, por exemplo montar um state pra cada pagina, onde tenho umas 20 paginas que carregam 500 registros grandes? ele não fica armazenando em cache mesmo as que não estão sendo mais exibidas? isso não pode ser um problema?
Ele tbm menciona que zustand pode ser usado na camada mais pura da aplicação e usou de exemplo a configuração do axios, faz tempo que queria ver uma solução que não fosse chamar mil fetchs no arquivo da sua página, algo mais próximo da svelte store. Amanhã definitivamente preciso testar kkkkk 😂
fiquei com uma duvida, e se eu tiver com duas views separadas? Uma com o botao de adicionar e na outra view a lista? como que faz pra escutar os eventos das views?
Conteúdo muito bom, obrigado! O Zustand é realmente muito simples, mas tenho uma duvida sobre como compartilha o estado na arvore de componentes do React, sem um Provider, alguém sabe me dizer ?
Bacana d+ viu, o zustand não precisa criar um hook e englobar toda a aplicação como fazemos na contextAPI? E outra, o zustand pode ser usado no angular?
pra fazer isso com redux classico LEVA UMA ETERNIDADE e (TYPESCRIPT vira um inferno). Já com Redux Toolkit É MT MAIS RÁPIDO. Mas, essa forma aí do Zustand SUPEROU TODOS hahhah A parte que o Zustand atende fora de um PROVIDER, é literalmente DIVISOR de águas. To com esse problema no App, queria fazer um toggle DEBUG MODE para chamar API staging ou API prod.
Cara falou e disse redux é muito verboso é desnecessário , o Toolkit veio pra dar uma sobrevida pra ele, mas nem de longe é minha opção mas infelizmente no mercado ainda é muito usado se não for o mais usado As vezes penso que a galera se matou tanto pra aprender que agora não querem ver outras soluções hahahahaha Trabalhei em apenas um projeto com zustand e foi muito pouco mas já adorava
no novo projeto que to fazendo (App) vai ser zustand na veia. Vamos ver como vai ser. Eu vi que zustand tbm tem um "redux" interno, que tem devtools tb. Eu só fiquei no redux por conta do devtools. Se o zustand funciona com redux devtools já da pra usar REDUX mas NO zustand. se tivesse um ZUSTAND devtools pra react native seria perfeito @@nittosantos1525
@@joaobibiano Uma galera aqui em baixo comentando que passou a utilizar uma biblioteca que sabe lá deus quem está por trás, ou oque está no código e tudo isso só pela facilidade de implementação ? Tomem cuidado com as bibliotecas que vocês baixam em seus projetos, ainda mais se for projeto profissional...
Concordo que o Zustand é uma ferramenta bacana, mas acredito que o Redux ainda tem seu lugar, principalmente devido à robustez das Redux DevTools. A Zustand tem um protótipo disso, mas sinceramente é um lixo. Pode chegar um dia que eles alcancem o mesmo nível de maturidade da ferramenta, mas enquanto isso não se enganem, em um projeto grande seria loucura trocar para uma ferramenta ainda tão imatura.
Vi outros vídeos antes desse e só complicaram algo que é bem simples, mas com a tua didática entendi bem rápido!
Zustand já é fácil, com essa explicação fica incrível, parabéns pelo trabalho
O zustand não so me ajudou como ferramenta como me fez entender o funcionamento do REDUX excelente explicação parabńes.
Cara, didática sensacional. Zustand é uma ferramenta, realmente, muito poderosa!
Tive um problema com Zustand em um app que manipula e persist grande quantidade de dados. Aparentemente o middleware de pesist do zustand ainda não é tão eficiente. Então tomem cuidado na hora que forem usar a ferramente dependendo da sua aplicação, vai pecar na performance. De resto, é uma ferramente boa! Provavelmente vou usar o jotai pra resolver esse problema ai.
Sensacional sua didatica. Não conhecia o zustand mas agora vou começar a praticar e talvez posteriormente utilizar nos projetos futuros com clientes. Valeu!
Mesmo com conhecimento 0 de Redux ou Zustand sua didática me fez absorver muito, valeu mano
Parabéns pelo video. Dando um pouco mais de overview, o atomic selector como vc mencionou ele detecta alterações com igualdade estrita (antigo === novo) por padrão, isso já é eficiente e otimizado. Algumas pessoas preferem assim. Mas se quiser criar um objeto único dai o recomendado é o uso do useShallow para evitar renderizações desnecessárias. Ex:
// Ok fazer assim e recomendável
const foo= useBearStore((state) => state.foo);
const bar= useBearStore((state) => state.bar);
// Se quiser juntar tudo dai melhor usar assim
import { useShallow } from 'zustand/react/shallow';
const [foo, bar] = useBearStore(
useShallow((state) => [state.foo, state.bar])
);
Zustand é muito bom. 😀
excelente! obrigado por compartilhar
Que didática top. Parabéns! Ganhou um seguidor.
Cara vc é um anjo só pode, tava quebrando a cabeça com redux e você apareceu com um milagre para nos ajudar, agradeço d+. LIKE LIKE LIKE
Ele foi um game change em um projeto! muito bom! conseguimos otimizar e ganhar 5x mais desempenho!
Visto isso, aprendam Redux ainda assim, é o padrão de mercado. Sensacional vídeo. Acho que o pessoal do Zustand tbm são os criadores do Jotai que é uma outra boa alternativa, porém mais simples.
Acho que so procuraria aprender redux se eu fosse aplicar pra alguma empresa que tenha, graças a Deus a empresa q eu trabalho a gente usa zustend e os freelas que faço eu uso zustend ^^, mas é verdade no mercado tem mt projeto em redux ainda!
Eu diria que legado vai usar redux, sim, mas projetos novos, acho difícil... no máximo redux toolkit
Cara incrível inclusive eu tive que usar o rxjs justamente pra pegar o estado de outra instância do react. Se soubesse dessa lib teria usado ela.
Parabéns 🤝🏻🤝🏻
Parabéns pelo video, muito simples de entender.
João o Zustand substitui o React Query, ou eles se completam? (to no início do vídeo ainda não sei se até o final você cita algo kkk)
Tenho usado a um tempo adoro o zustend simples e facil e funciona bem com TS
boooa Italo, valeu pelo feedback
Mano, quanto estresse eu passei pra aprender e implementar redux! Implementei no meu projetinho pessoal e funcionou de primeira e muito fácil. Obrigado por compartilhar.
sem dúvidas ;) obrigado pelo feedback Gilson!
Fantastico man. vou começar a usar hoje na empresa e vim procurar mais sobre. Top demais o exemplo.
booooa thiago, depois conta como foi!
lol quanta irresponsabilidade.
@@Roberto-do5nh tu não sabe se ele é o único dev da empresa, ou se ele é a empresa
Sinceramente não entendi o pq do seu comentário? Qual seria a irresponsabilidade?
Mano, que incrível isso.
Nunca usei nenhum gerenciador de estado por ouvir que adiciona complexidade ao código, mas isso mudou minha visão.
opaaaa, muito bom ! depois me conta quanto usar
Muito bom, parabéns pela didática
Fascinado com o quão simples é de se usar! Melhor canal de dicas para devs que tem, não perco um! Ótimo conteúdo!
maravilhoso né? valeu pelo feedback!
@@joaobibiano cara o tanto que você já me salvou com seus vídeos não tá escrito!!!
Em uma aplicação escalável, como você sugere organizar os arquivos? Separar as requisições assincronias à API em um outro arquivo (services.ts)? um arquivo para os types?, etc
Legal demais. E a persistência do estado, como faz?
que vídeo daora cara, não sabia do subscribe do zustand, valeuu
Opa Savio, que bom que curtiu!! valeu
Mano, muito top. Qual tema cê tá usando?
Mano, que tema é esse? Vídeo sensacional
Coisaaa linda cara. Muito obrigado pela dica ❤
Valeuuu Deco
muito bom, obrigado!
Perfeito!
Incrível, parabéns!
Parabéns João, muito top, conteúdo excelente!
Obrigado @acmedis
Qual é o tema que você usa no VS Code?
como fica usando isso em varios lugares, por exemplo montar um state pra cada pagina, onde tenho umas 20 paginas que carregam 500 registros grandes? ele não fica armazenando em cache mesmo as que não estão sendo mais exibidas? isso não pode ser um problema?
Sensacional. Parabéns!
No 10:46 poderia ter desestruturado diretamente e não o fez, fiquei na dúvida agora de fizer assim ele renderiza porra toda amanhã vou tentar.
Ele tbm menciona que zustand pode ser usado na camada mais pura da aplicação e usou de exemplo a configuração do axios, faz tempo que queria ver uma solução que não fosse chamar mil fetchs no arquivo da sua página, algo mais próximo da svelte store. Amanhã definitivamente preciso testar kkkkk 😂
Top o vídeo!!!
Qual programa usas para gravar os vídeos? Tem muita qualidade!
fiquei com uma duvida, e se eu tiver com duas views separadas? Uma com o botao de adicionar e na outra view a lista? como que faz pra escutar os eventos das views?
Show de bola hein! Parabéns pelo vídeo
fala wallace, valeu pelo comentário!! abraço
Opa mestre, essa 'Jornada Dev de Elite gratuita' ainda ta disponíevel?
Esse negocio de compilot dele sabe programar melhor que eu 😢😂
Excelente vídeo, já dá pra vender curso kkkkk
Sobre a parte de fazer pick do Store, é possível fazer também via desestruturação? Sem passar o state => xxxx dentro do parâmetro do hook
sim, mas ai você não vai ter o ganho de performance, porque o hook vai se ligar a store inteira.
Conteúdo muito bom, obrigado!
O Zustand é realmente muito simples, mas tenho uma duvida sobre como compartilha o estado na arvore de componentes do React, sem um Provider, alguém sabe me dizer ?
se for com zustand ele já faz isso por padrão e fazer um provider no main da aplicação é opcional
Bacana d+ viu, o zustand não precisa criar um hook e englobar toda a aplicação como fazemos na contextAPI?
E outra, o zustand pode ser usado no angular?
Não precisa, é como eu disse, não precisa de providers ;)
@@joaobibiano puts vei, que top viu
Muito massa!
opa! que bom que curtiu, valeu
Calma que isso tá explodindo minha cabeça, é sério q toda a aplicação terá acesso ao state até mesmo sem nem um provider gente??? É isso??
hahhahaa exatamente rian ;)
mano vc está falando literalmente como o filipe deschamps falaria
Sensacional
valeu pelo comentário @ectorcunha
pra fazer isso com redux classico LEVA UMA ETERNIDADE e (TYPESCRIPT vira um inferno). Já com Redux Toolkit É MT MAIS RÁPIDO. Mas, essa forma aí do Zustand SUPEROU TODOS hahhah
A parte que o Zustand atende fora de um PROVIDER, é literalmente DIVISOR de águas. To com esse problema no App, queria fazer um toggle DEBUG MODE para chamar API staging ou API prod.
@vinaciotm sem dúvidas, falou tudo. Redux clássico, com thunk, middlewares... santo Deus. Funciona? Funciona. Mas a dor é grande.
Cara falou e disse redux é muito verboso é desnecessário , o Toolkit veio pra dar uma sobrevida pra ele, mas nem de longe é minha opção mas infelizmente no mercado ainda é muito usado se não for o mais usado
As vezes penso que a galera se matou tanto pra aprender que agora não querem ver outras soluções hahahahaha
Trabalhei em apenas um projeto com zustand e foi muito pouco mas já adorava
no novo projeto que to fazendo (App) vai ser zustand na veia. Vamos ver como vai ser.
Eu vi que zustand tbm tem um "redux" interno, que tem devtools tb.
Eu só fiquei no redux por conta do devtools. Se o zustand funciona com redux devtools já da pra usar REDUX mas NO zustand.
se tivesse um ZUSTAND devtools pra react native seria perfeito
@@nittosantos1525
Desculpa a minha ignorância, mas o que é "pn dev"?
pnpm dev
Ele é especifico do react ou da para usar com angular?
dá pra usar com angular sim ;)
Isso de usar um state fora de um functional component é bizarro mesmo, fiquei surpreso
Isso é fantástico mesmo, sem dúvidas
Simples, mas por que as empresas não adotam tanto o Zustand? Ou é questão de tempo?
Nunca usei redux, tem a context api.
Prefere o zustand ou jotai?
Fala Tiago, de forma geral, gosto do Zustand! O Jotai tem o foco em dividir o estado em pequenos pedaços e "atoms".
@@joaobibiano obrigado
Dedo no like
senta o dedo no like
Da pra usar com Vue?
yup
agora esta na hora de usar essa doença no meu game, demorei muito para abandonar o redux e parece que será de vez agora....
Está usando github copilot ou outro?
copilot :)
Cara isso não abre uma puta brecha de segurança na aplicação não ?
não, tudo que está no frontend é SEMPRE disponível para ataques, por isso que ali tu não deixa informação sensível
@@joaobibiano Uma galera aqui em baixo comentando que passou a utilizar uma biblioteca que sabe lá deus quem está por trás, ou oque está no código e tudo isso só pela facilidade de implementação ?
Tomem cuidado com as bibliotecas que vocês baixam em seus projetos, ainda mais se for projeto profissional...
@@Roberto-do5nh o código é open source, é só ir lá conferir
Toda hora tem coisa nova 🤦♂️
epoca boa era epoca do aspx, era so mandar tudo pra view e ser feliz kkkk
hahahahah site pesadao mas funcional
@@joaobibiano acho q hj em dia n ia ser muito pesado, pois temos tecnologi 10x melhor. Pra crud tava otimo kk o problema é a essar pelo mobile kk
Concordo que o Zustand é uma ferramenta bacana, mas acredito que o Redux ainda tem seu lugar, principalmente devido à robustez das Redux DevTools. A Zustand tem um protótipo disso, mas sinceramente é um lixo. Pode chegar um dia que eles alcancem o mesmo nível de maturidade da ferramenta, mas enquanto isso não se enganem, em um projeto grande seria loucura trocar para uma ferramenta ainda tão imatura.