Once again, thank you for giving me the opportunity to post this course to the channel. I'm really happy to already see so many people appreciating it! Have a good day y'all :)
Update: If you stumble across some issues with the bit about equality functions, then you should probably be checking out the createWithEqualityFn function from version 4.4.0 and up. Because the way to do it that I used in the course is now deprecated.
I like how you iterate steps, starting from very basic to more and more advanced, instead of doing a whole task in one go. It really helps see the necessary steps and debug.
Since I couldn't find any Japanese materials on Zustand, I watched an overseas video for the first time. It was very educational. I'll use it in my next project.
@@Hizbullla you're probably technically correct, but VDOM is currently the commonly known and used term for this approach. it's definitely much "more correct" than shadow DOM, which something completely different 😄
After 2 months, I'm glad to see there's an expanded video on Zustand. Now I can continue building my e-commerce application but please next time focus on the topic. You took longer time focusing on styling which wasn't necessary. Thanks.
Ein Deutscher! Wow.. Toll! Ich komme aus Indien, aber ich versuche Deutsch zum lernen.. Es ist nicht einfach, but, eehh.. es geht! Super Tutorial! 👌🏻 🇮🇳❣️🇩🇪
So awesome that this was uploaded on the same day I was looking for it! Really looking forward to something easier to use than Redux- React is overdue for something hooks based that doesn't involve a lot of boilerplate template junk code just to get running
Thanks a lot for your presentaion, from your video I can understand and drive zustand to manage the react state. From my understanding, it generates a private memory area in the brower side where various types of object and values as well as function can be operated in this memory block. and It can be accessed by outside components. very good job Niklas.
I wonder if not using a Provider can be considered a pro. Without a Provider you can't reuse the same instance of a store for a different part of the app. There's already an issue and a StackOverflow question about lacking that ability in Zustand. It's also not faster than Context per se. It's faster than a Context that passes state to all consumers. It's very simple to create a smarter context that allows selective reacting that Zustand (and other libraries) feature. Zustand is awesome, but I feel like people keep missing out on the power of Context. I think I'll write an abstraction just to show how powerful it is 😅
As a junior or beginner, I appreciate you including the CSS. You obviously csnnot cster for everbodys needs. The more experienced guys can simply skip the CSS portion. What are you whiningcabout? Still getting the tutorial for free😊
I needed a quick solution to learn Zustand and I had to give up after battling with CSS for 45 minutes (first time I actually watch a tutorial in x0.75). The tutorial is good and I believe there is a lot of work behind. Just not a Zustand course.
In the tutorial @22:26, evluating longest and then go over every element to see whether it exists is a bit slow. Just return false directly when the length of both elements differ.
23:03 Here is the source, I don't think it was possible for it to have been written that way at the time. ```ts // ... ignore const keysA = Object.keys(objA) if (keysA.length !== Object.keys(objB).length) { return false } for (let i = 0; i < keysA.length; i++) { if ( !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) || !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T]) ) { return false } } return true ```
You really should have used a CSS library. And it wasn't a good choice to call "status" as "state", because it's confusing in a State Management course, especially since in Redux a lot of boilerplate prop was called "state". Besides that it wasn't a bad course, but it could be better.
i was just seeing zustand for the first time and wanted to not learn it anymore . Thank you , i'll now look for something simple and better than a chaotic css tutorial.
if you get error: "TypeError: Cannot convert undefined or null to object" use this import "import * as matchers from '@testing-library/jest-dom/matchers';"
I have this problem, in unit testing with vitest, can someone explain or provide a solution for this, this is the error. Sorry just a first timer in unit testing. TypeError: Cannot convert undefined or null to object ❯ setupTests.js:6:8 4| import "@testing-library/jest-dom"; 5| 6| expect.extend(matchers); | ^ 7| 8| afterEach(cleanup);
Once again, thank you for giving me the opportunity to post this course to the channel. I'm really happy to already see so many people appreciating it!
Have a good day y'all :)
Hast du richtig gut gemacht 👌
@@eduardalbrecht9585 Danke dir 😄
Great Course ❤🔥
You have a gift for teaching, man ... please continue with it.
This was an incredibly good tutorial.
Thank you.
Update: If you stumble across some issues with the bit about equality functions, then you should probably be checking out the createWithEqualityFn function from version 4.4.0 and up. Because the way to do it that I used in the course is now deprecated.
I like how you iterate steps, starting from very basic to more and more advanced, instead of doing a whole task in one go. It really helps see the necessary steps and debug.
Since I couldn't find any Japanese materials on Zustand, I watched an overseas video for the first time. It was very educational. I'll use it in my next project.
i was expecting a zustand tutorial but this guy keeps writing css :D
6:35 "shadow DOM" is a browser API which is not what React uses. the correct name is virtual DOM or VDOM. Vue uses it too.
Virtual DOM isn't an official term. Even the React team is hesitant to call it that and wants to move away from that terminology.
@@Hizbullla you're probably technically correct, but VDOM is currently the commonly known and used term for this approach. it's definitely much "more correct" than shadow DOM, which something completely different 😄
"The Why Zustand?" section was brilliant.
After 2 months, I'm glad to see there's an expanded video on Zustand. Now I can continue building my e-commerce application but please next time focus on the topic. You took longer time focusing on styling which wasn't necessary. Thanks.
Thanks for the Zustand and CSS tutorial 💙
Ein Deutscher! Wow.. Toll! Ich komme aus Indien, aber ich versuche Deutsch zum lernen.. Es ist nicht einfach, but, eehh.. es geht! Super Tutorial! 👌🏻 🇮🇳❣️🇩🇪
Danke dir! Viel Erfolg beim Deutsch lernen 😃
@@NiklasZiermann 😁
this is so cool. I'm building a react native app and I needed a better option than context and thank you for this. this really helped me.
So awesome that this was uploaded on the same day I was looking for it! Really looking forward to something easier to use than Redux- React is overdue for something hooks based that doesn't involve a lot of boilerplate template junk code just to get running
quick, simple. efficient, straight to the point, great video
😂😂😂
Thanks a lot for your presentaion, from your video I can understand and drive zustand to manage the react state. From my understanding, it generates a private memory area in the brower side where various types of object and values as well as function can be operated in this memory block. and It can be accessed by outside components. very good job Niklas.
great demonstration in the real case!
I was worried looking at redux boilerplate, pheww. Thanks mate.
nice css tutorial👍
Such an amazing Tutorial
This came at the right time....just started looking at zustand yesterday
Thank you for pronouncing Zustand correctly 😂
this is a gold mine thank you!!
great job
Thank you for course.
I wonder if not using a Provider can be considered a pro. Without a Provider you can't reuse the same instance of a store for a different part of the app. There's already an issue and a StackOverflow question about lacking that ability in Zustand.
It's also not faster than Context per se. It's faster than a Context that passes state to all consumers. It's very simple to create a smarter context that allows selective reacting that Zustand (and other libraries) feature.
Zustand is awesome, but I feel like people keep missing out on the power of Context. I think I'll write an abstraction just to show how powerful it is 😅
Awesome tutorial
This is so cool. Thank you 👍
This helps me a lot, thx
👌🏻 Good as always 🚀
Very nice tutorial.A little confusing though on why you chose to name the tasks object as title and state. status would be a less confusing name
Amazing Video, I would love to see one for Jotai as well with Jack Harrington
I watch a lot of tutorials and please when you want to show an exact technology prepare your css before the tutorial,,
I agree. I don't care about CSS, I'm here to learn about zustand
As a junior or beginner, I appreciate you including the CSS. You obviously csnnot cster for everbodys needs. The more experienced guys can simply skip the CSS portion. What are you whiningcabout? Still getting the tutorial for free😊
21:20 Soon after adding shallow. It says useStore is deprecated?
Nice Tutorial, Can we create similar tutorial on Jotai and a comparison of Both. Will be really helpful
Seems more like css video than zustand...but when the concept was edplained, it was good Thank you
really comprehensive video, Effort much appreciated.
no offense, but i think it spends a lot of time writing css............not ideal for the impatient
The best state lib
Thanks, Niklas, you are a fantastic teacher. I would love to learn more from you. Do you have any Udemy course?
I need this 😮 thanks
i used to learn a very simple way to use zustand, your way seems making things complicated. Maybe your way is too advance level for me.
Thanks for the work
Oh, that's fantastic, down with the redux!
Great Tutorial.
it will be sure to use vite react, right?
MAH, MAAN! Just made fookin Trello from scratch! LMAO!! rad skills!!
Greate tutoral but it would be nice to leave if you left out the css and just focus on zustand.
This tutorial needs another tutorial tbh 😕
Am I the only one who's confused with this explanation?
no, bro. count me in. This tutorial maybe not for beginner
As a German I have to say that you should look up how to say Zustand
Genau! Das tut mir leid
This
🤣🤣🤣
Tsu-shtund
thanks a lot 🎉
I needed a quick solution to learn Zustand and I had to give up after battling with CSS for 45 minutes (first time I actually watch a tutorial in x0.75). The tutorial is good and I believe there is a lot of work behind. Just not a Zustand course.
addTask unit test case failed tried many things and follow line by line code from the video too. How it is working in the video?
Hi, I think there is a small misinfo, that react uses virtual dom not shadow dom
You should not use Shadow DOM if you mean Virtual DOM. Shadow DOM is Browser API and part of Web Components.
Nice tutorial in general but a bit chaotic.
I'm learning code I'm picking up patterns and what to do fast BUT I really don't know the words to type all the time....its tough
thanks!
Ty ❤
Yayyyy🎉🎉🎉🎉🎉🎉
In the tutorial @22:26, evluating longest and then go over every element to see whether it exists is a bit slow. Just return false directly when the length of both elements differ.
what about if they have different values ?
@@mikelan9854 You go over all the elements then if the length is the same. But you don't have to if the size already differs.
Timestamps please :)
Good but you should read what shadow DOM is
why not typescript ?
@25:29 what does he uses for the error appear on the line it ocurrered?
It's Error Lens extention by Alexander
Endlich ein Deutscher
Die Freude ist ganz meinerseits :)
Can a browser db like watermelon db be used instead of state management in react
🔥
I'm going to create my TODO app next using this course and firebase
23:03 Here is the source, I don't think it was possible for it to have been written that way at the time.
```ts
// ... ignore
const keysA = Object.keys(objA)
if (keysA.length !== Object.keys(objB).length) {
return false
}
for (let i = 0; i < keysA.length; i++) {
if (
!Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
!Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
) {
return false
}
}
return true
```
You really should have used a CSS library.
And it wasn't a good choice to call "status" as "state", because it's confusing in a State Management course, especially since in Redux a lot of boilerplate prop was called "state".
Besides that it wasn't a bad course, but it could be better.
Totally agree. You should use "status". The prev course I watched was about rtk and was confused in the beginning. Besides that good course
Consider not using margin on flex children to space them evenly. Use gap.
thanx good try but no need in styling here and why to call a variable state, it's confusing cuz state is reserved in redux ex
🔥😍
👍👍
First view ❤
👍🏼👍🏼👍🏼
WOW
please make a course for game maker
Very poor demonstration of Zustand! If I was too see Zustand for the first time from this guy I would had never have used it!
i was just seeing zustand for the first time and wanted to not learn it anymore . Thank you , i'll now look for something simple and better than a chaotic css tutorial.
Zustand 10% css 90%
too fast, too much css, a little bit messy tutorial
Why waste so much time in styling? Its a state management tutorial...
Here because context providers ruined my day
Not a very intutive explanation
Plese meka chaybot in pythun
Bear
You lost me at "Javascript" .... 😐
Too much CSS
if you get error: "TypeError: Cannot convert undefined or null to object" use this import "import * as matchers from '@testing-library/jest-dom/matchers';"
I have this problem, in unit testing with vitest, can someone explain or provide a solution for this, this is the error. Sorry just a first timer in unit testing.
TypeError: Cannot convert undefined or null to object
❯ setupTests.js:6:8
4| import "@testing-library/jest-dom";
5|
6| expect.extend(matchers);
| ^
7|
8| afterEach(cleanup);
import * as matchers from '@testing-library/jest-dom/matchers'; this fixed it for me
Freecodecamp 🤝 student❤
The styling is a waste of time