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.
@@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 😄
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
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 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.
Ein Deutscher! Wow.. Toll! Ich komme aus Indien, aber ich versuche Deutsch zum lernen.. Es ist nicht einfach, but, eehh.. es geht! Super Tutorial! 👌🏻 🇮🇳❣️🇩🇪
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 😅
if you get error: "TypeError: Cannot convert undefined or null to object" use this import "import * as matchers from '@testing-library/jest-dom/matchers';"
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 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.
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.
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 ```
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.
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 😄
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
nice css tutorial👍
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.
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.
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.
quick, simple. efficient, straight to the point, great video
"The Why Zustand?" section was brilliant.
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 😁
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 😅
great demonstration in the real case!
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
i was expecting a zustand tutorial but this guy keeps writing css :D
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
I was worried looking at redux boilerplate, pheww. Thanks mate.
This came at the right time....just started looking at zustand yesterday
Am I the only one who's confused with this explanation?
no, bro. count me in. This tutorial maybe not for beginner
no offense, but i think it spends a lot of time writing css............not ideal for the impatient
This helps me a lot, thx
👌🏻 Good as always 🚀
Thanks, Niklas, you are a fantastic teacher. I would love to learn more from you. Do you have any Udemy course?
This is so cool. Thank you 👍
This tutorial needs another tutorial tbh 😕
Awesome tutorial
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.
21:20 Soon after adding shallow. It says useStore is deprecated?
this is a gold mine thank you!!
it will be sure to use vite react, right?
Amazing Video, I would love to see one for Jotai as well with Jack Harrington
why not typescript ?
Thank you for course.
You should not use Shadow DOM if you mean Virtual DOM. Shadow DOM is Browser API and part of Web Components.
As a German I have to say that you should look up how to say Zustand
Genau! Das tut mir leid
This
🤣🤣🤣
Tsu-shtund
great job
Thank you for pronouncing Zustand correctly 😂
The best state lib
Thanks for the work
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'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
I need this 😮 thanks
Great Tutorial.
Oh, that's fantastic, down with the redux!
too fast, too much css, a little bit messy tutorial
Nice Tutorial, Can we create similar tutorial on Jotai and a comparison of Both. Will be really helpful
Timestamps please :)
really comprehensive video, Effort much appreciated.
Greate tutoral but it would be nice to leave if you left out the css and just focus on zustand.
Can a browser db like watermelon db be used instead of state management in react
@25:29 what does he uses for the error appear on the line it ocurrered?
It's Error Lens extention by Alexander
thanks a lot 🎉
Ty ❤
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.
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
🔥
Seems more like css video than zustand...but when the concept was edplained, it was good Thank you
MAH, MAAN! Just made fookin Trello from scratch! LMAO!! rad skills!!
First view ❤
Yayyyy🎉🎉🎉🎉🎉🎉
thanks!
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.
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.
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.
🔥😍
WOW
👍👍
Good but you should read what shadow DOM is
👍🏼👍🏼👍🏼
Nice tutorial in general but a bit chaotic.
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
```
Endlich ein Deutscher
Die Freude ist ganz meinerseits :)
Consider not using margin on flex children to space them evenly. Use gap.
please make a course for game maker
Why waste so much time in styling? Its a state management tutorial...
Plese meka chaybot in pythun
Not a very intutive explanation
Bear
You lost me at "Javascript" .... 😐
Zustand 10% css 90%
Here because context providers ruined my day
Too much CSS
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