Zustand Beginner Tutorial - Learn React State Management With Zustand

In this video I will be teaching one of my favorite state management solutions in react, ZUSTAND!!!
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
🐙 GraphQL Course: codedamn.com/l...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: pedrotech.co
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/mac...
Business Email: [e-mail]
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
..........
♬ MUSIC ♬
Artist: tubebackr
Track: Chill With Me
@tubebackr
hypeddit.com/tubebackr/chillwithme-1
.............
#reactjs #coding

[@creamCheese89]

you have no idea how i become a react js developer in quick, clean and precise, all the video that you made taught me like a kinder garten, i really love how you helped me grow in programming!

[@EducationSimplified]

Man I'm Indian. My mother tongue is Hindi. But still I understand you like you are teaching in my very local language. Like a friend who knows me very well. Who knows, how I will grasp the concept. Thank you Man. Thanks a lot.

[@PedroTechnologies]

Glad to hear man!

[@Kira13555]

I love you and your tutorials so much man, please keep up the great work -a wannabe frontend dev

[@codewithAbdulMumin]

this is the best zustand video ever made anywhere. simple and well explained thank you.

[@PedroTechnologies]

Glad you enjoyed it!

[@bobdaawid2218]

I think i really love zustand already, i find props usage really confusing but watching this makes everything easier. would appreciate a complete mern stack project using zustand.

[@danimunf]

I'm having an interview in the next days, and the requirement state that they use Zustand, i never heard about it before, now i know. I learn a lot from you. 🎉

[@matheusgobetti1436]

Cara, teu ingles é perfeito e eu entendo tudo, a maioria dos canais gringos falam com tanto sotaque que é dificil de entender... Obrigado por usar palavras simples!!

[@serhatyavas6242]

you're are great teacher you have the ability to understand how people can understand coding

[@ahmaddawood9691]

Excellent Job ..Thanks for saving me from "Context" junk,,watched your video and apply it instantly to my project and Boom :) :)

[@Veneris96]

This video would've reeeally helped me a lot last year during my final exam lmao Better late than never I guess, ty for the tutorial Pedro; good stuff. ❤

[@jamesbest2221]

Very interested in Zustand! Thank you!!

[@Лаурахит]

It would be interesting to look at the use of multiple stores, whether zustand has something like combineReducers and how one could track the state of change of any value. Thank you for the excellent and educational videos, they educate well

[@k2an]

nice nice nice !!!!! bravo! awesome sharing, you differ from others.. not just a counter sample. keep going like this!

[@PedroTechnologies]

Thank you!! I appreciate that :)

[@ABHISHEK_RANJAN01]

Thank you for such great explanation😇, and,it would be great if you could add some more videos on zustand....

[@aNDy-qh1em]

Bravo, great tutorial, thanks bro! Waiting for more - you have great explanatary skills - largley more clear than multiple explanations on my native language! Btw, in german it seems to sound like "tsoushtand"

[@tamilalagarsamy3857]

Awesome to explain. Please make more videos on Zustand.

[@parthivsolanki21]

As Always, Great Explained 🔥

[@FirasMohamed96]

Zustand is not one of the best RSM, IT IS LITERALLY THE BEST RSM HAS EVER MADE 🔥🔥🔥

[@DallBelloCamila]

So nice!!! Thank you for the video that was really helpful!

[@shedrachugochukwu6245]

Thanks allot, Pedro. This matters much

[@zaidmaraqa5360]

thank you pedro, any chance you can make a couple more advanced zuustand tutorials

[@tonyg_nerd]

For those comparing with Context, the video linked here describes issues with Context, but more importantly among the pro-Zustand comments are notes that Zustand and Context are two different things. Before commenting that one or the other is "better", understand that they are not the same and both should be in the toolkit, to be used or not in specific scenarios. Thanks for the vid, Pedro! kzbin.info/www/bejne/fKGshZSOerR9kJIsi=CR3bbbM6JfzJJg5k

[@MANUMANU-jq6pb]

Awesome video bro!!! THANKS !!!

[@royarnab]

immer seems to be a useful thing, thanks

[@mohammadravand4351]

thank you man, great work💖

[@codewithenima]

Thanks for u tutorial, I will just add small explanation for selectors patterns it’s prevent to re-rendering components

[@MohammedAlziko]

woow You make it so simple,😘😘

[@PedroTechnologies]

Thanks a lot 😊

[@Goku-zu3rk]

Can you make a video on testing libaries and what tests you would cover? i spend a lot of time with that and most people dont seem to cover this topic much on the internet.

[@okkkk88612]

best zustand tutorial thumbs p

[@jokerdz1711]

think you bro your fan from algearia

[@JimohSegun]

Nice tutorial, I'll like to know which theme youre using

[@mynameisnotshane6501]

Thank god someone working without ts

[@MohammedAlziko]

🤣🤣🤣

[@TemmyCodingLifestyle]

I love this. Can you make a project using React Query and Zustand. A CRUD app

[@farzan2799]

thanks 🙏 It was really helpful ✌

[@rambsdev]

Auto like Pedro. Like to ask if you use a extension about indenting the code and back it to one liner.. Thanks

[@william_phyo]

Thank you.

[@QuanNguyenViet-zt6zb]

How to manage status from api? For example, Cart.

[@somitmeshram1238]

Can you please make NEXT JS Course the same way you made for react

[@pianoworld_1]

hence you proved developers spend 2 hours to make the work simple that takes 2 mintues . by the way awesome tutorial

[@victorhenriquecollasanta4740]

can we populate the initial states from the store with data provenients from the backend? API calls or Serveractions

[@fluxsiarski]

Thanks for amazing lesson Pedro, Pedro, Pedro, Pedro, Pè Praticamente il meglio di Santa Fè Pedro, Pedro, Pedro, Pedro, Pè Fidati di me Pedro, Pedro, Pedro, Pedro, Pè Praticamente il meglio di Santa Fè Pedro, Pedro, Pedro, Pedro, Pè Fidati di me Altro che ragazzino, che perbenino Sapeva molte cose più di me Mi ha portato tante volte a veder le stelle Ma non ho visto niente di Santa Fè

[@manu-my3fv]

Thanks

[@hong18s]

Good tutorial for beginner. I have a question. does it still need to use the select pattern? we can use like this const { data, setData } = useStore();

[@returncode0000]

awesome 👍🏻

[@hussainbhagat8855]

I did not understand the selector part that you had in the end. Can we not simply call the states and functions just by simply destructuring the store hook function? What am I missing here?

[@lokeshkavisth]

Immer is very handy 😮

[@sadakvali8930]

why don't we use immer as a middleware instead of using "produce" from immer?

[@PushVOD]

I think destructing your state is bad because it forces everything to rerender when anything in the state changes instead of just items you need. but great tutorial everything is amazing

[@abirkolin4702]

thanks a lot!

[@techwithrashid4946]

Hey which software are you using for screen recording?

[@PedroTechnologies]

I just use quicktime player, OBS screws up my computer for some reason

[@speedster784]

Have you ever worked with fabric js?

[@PedroTechnologies]

No unfortunately :/

[@soniagrant570]

thanks, do you have a link to code repo?

[@Klklpia]

Awesome 😎😎😎

[@bryandelacruz9066]

Hi, may I know where is the full code for this project?

[@arghyadutta6604]

Where is the repository for this tutorial?

[@newbiedevtons]

Can I combine zustand with react query for api fetching in react?

[@ArhamAli-h1p]

Have u tried hows your experience ?

[@AsishSharma-gi8tb]

Can you please provide us the GitHub repo ?

[@gaming_zen_99]

Cookies are the best state management tool. Change my mind.

[@PedroTechnologies]

But changes in the cookie value won't trigger a re-render in a react component 🤔

[@gaming_zen_99]

@@PedroTechnologiesI am facing this issue. I am trying to toggle dark/light mode using cookies. But it works on initial page load but not later on cuz of no re-render.

[@gaming_zen_99]

Can you make a video about how to toggle theme in server side rendering

[@PedroTechnologies]

@@gaming_zen_99 yeah, this is a good use case for states. When the value of a react state changes, it forces the rerender of the component displaying it. If you want to toggle something that will be used in many different components, like a theme, i recommend creating a ThemeContext with the context api and manage ur states like that. There are a bunch of videos online on the topic :)

[@gaming_zen_99]

@@PedroTechnologiesThanks bro! I am aware of that, just trying to see if I can do it with only cookies since localstorage is useless now cuz of ssr.

[@usehook]

what is u vscode theme

[@hemitclassroom]

dracula i think

[@victorhenriquecollasanta4740]

perfect, fuck redux!

[@henry_ornellas]

carai ingles fino do fino

[@rbnzdave]

Ok so when this doesnt work for you, change your zustand version to 4, as 5 doesnt work. That'll be a problem for future me to deal with :D

[@rbnzdave]

side note, `npm install zustand` will install the latest rc at the time of writing, which, when i have bounced forward and back ( `npm install zustand@4` vs `npm install zustand` ) DOSENT work with the code shown. Mystery solved, the world is now sane again, my hair will regrow.

[@tonyg_nerd]

​@@rbnzdaveSo to be clear, v5 doesn't work, v4 doesn't work, and the RC doesn't work, but mystery solved! 😂

[@user-hh3hv5ei8w]

Zustand is literally the German translation for "state", i thought KZbin half translated the video title lmao

[@ragtop63]

Honestly, there really isn't much in here that can't be accomplished with well designed Context providers. Especially if the main goal is to move away from prop drilling. Plus, using context has the added benefit of being worked with using regular JavaScript. No need to learn how to use library methods and their associated syntax.

[@arzooqadri8805]

earlyyyyy

[@asdfasdfuhf]

Downvoting because you dont use typescript

[@kushalmondal618]

TS should be default if any JS family work is done After 2021...

[@tonyg_nerd]

Not fair to downvote a tutorial that is focused on a different topic. I agree that TS is better but in a tut it complicates the material unnecessarily, especially for those still getting a grip on basic JS plus React. Downvoting your lack of experience and empathy. 🤨