Jack, your level of detail and research is second to none. Through your videos, I feel i've become a better problem solver and decision maker. A big thanks
Great video. Important addition for everyone watching this: Don't use state managers for fetching data, use React Query and you will find that probably 90% of your state is actually server state. And React Query is handling refetching, loading state, errors and caching for you out of the box.
@@belkocik When a user is logged in, you store their cart on the server anyway. When adding an item, use useMutation to send a request to add item on the server and automatically refetch all items in the cart. When the user visits the site again, use useQuery to get all the items in the cart.
@@GVal98 What about if user is not logged in? How to handle the problem when a not logged in user added a few items to a cart and then logged in? The question is what if there are items on the server that he added previously when he was logged in? Fetch only the items from server and show them in cart or compare the items in local storage with the server's one and do what? :D How to handle the issue? Would love to see some code beacause I don't know how to do it :D
@@belkocik Either when adding items, you can ask the user to login to add items. Otherwise, if some items have been added to the localstorage, as soon as he logs in, add those new items to the server as well (need not update the existing items in the server)
@@belkocik You can generate a guest id/session/token and use it in requests just like a regular user id. But the server must be ready for this and distinguish users from guests. As for the second question, you just do it like you did before with your state managment. I think it's up to you whether you want to combine items or just download from them the server.
Using an expression in the dependency array is something i probably would never have thought of! Seems like a super useful technique though! Thanks for that! Also, love zustand especially in combination with immer once you get used to the mental model!
React hook lint rule complains about having an expression in deps array. You would have to extract it to a variable and use that instead. Or excuse the rule there.
Simply great presentation. I've done some research myself about different libs available for state management, but most of the resources out there compare just a couple of libs. You on the other hand compared almost exhaustive list of state management libs and concepts, giving the ability to distill those concepts into different categories. This is an amazing work with a huge value that I don't belive I can get anywhere else in one single place. Great presentation! And I love that you've also added your personal views at the end, adding more flavor to it, that is also based on relational thinking and business consideration. Awesome content! Keep em coming...
I have been developing react app for couple of years. But watching your videos makes me re-think about my prod code, and I definitely get some improvements and refactor in the code base ! Man you are legend for preparing clear and concise content. Keep up the hard work ❤️❤️
Would love to see a video on your point about business logic along with some examples of architectures/patterns that should be considered to keep it externalized.
simply insane comparison. Im lost for words and the repo for free to go over it. You are a legend! I've been working as a full stack dev for a couple of years now, and yet only came across local and global state implementations. Hopefully with time and practice will get to the level of thinking in architectural way. Props for another great video
Actually fantastic work here, we're in the transition of deciding what state manager and model should we go into our business application, and it creates a lot of fuss and confusion, this video's very very interesting and really perfect timing for us :)
I just came across to this video by a coincidence, but it is really good stuff! I am just surprised why it doesn't have more views, your presentation (as well as the code) is very clean plus the value I get from it considering the length of the video is excellent!
Hello Jack, I really appreciate your video quality and subjects you're generally covering. I had a topic that could be of interest to many JS coders; namely "How to set up a NPM module with typescript types and codes that are reused between different project we're working on". Maybe you've already covered it? In all cases, enjoy 2022! (PS: I totally share your API+ approach but with React-Location as router plus I tend to avoid any state manager but using React-Query and the React-Location search URL as a replacement)
Thank you for the excellent content! Can you do a video on the best practices to keep business logic separate from state management and api calls ? Maybe while using something like react query and redux toolkit?
2 года назад+2
Best overview of current state managers yet! Great work :)
Wow, excellent information - thank you. I've been digging deeper into React after having used Vue professionally for the last two years. Such a comprehensive rundown of all of the various state management solutions in the React ecosystem is incredibly helpful. Even if I may not ever use all of them, I certainly appreciate better understanding what my options are. Looking forward to more of your content.
Awesome demo, I remember your writings about adobe flex few years ago what a memory, it is not strange to continue this success and the continuous learning and development journey, keep on Jack.
A little question, it would be nice if you could explain a bit more about separating the business logic of the code source, because I cannot imagina a way of doing that. I'm going to check in the videos of the channel to see if there is one video about that :)
Thanks! great video as always, (seems also you can apply to editing job now 😉). I would love to see an example how to separate the business logic from react. - What parts you would put in a custom Hooks and what part will remain separated . I don't have a simple example of code to be a use case for that, but I will do my best to help if you want to make a video example. And talk about your new book, I would love to hear about it.
Great content, thank you. I personally use Apollo Client, React Hook Form and also Reactive Variables from Apollo client to handle the Client side state. I used to couple Apollo Client with React context, until Apollo came up with reactive variables, so I don't introduce another state management tool anymore, and just handle everything with Apollo Client.
@@jherr My bad and I have no idea how I skipped past Recoil that I was looking for :D. Nice and concise across the board review/intro to state management.👍
Really like the video! Should be worth noting that while Akita is still maintained, the developers started a new project called Elf to use instead. Reasoning just they wanted to do more updates but it would break too many apps using Akita. Seems like long term Elf is their go to.
I love working with MobX but most devs prefer Redux and now when you showed how Redux Toolkit works and how less boilerplate it needs, I believe I will choose it as the main one (dependent on business needs of course)
Your a stud, keep doing this quality content and you will hit 1million subs. Only suggestion, some shorter "starter" content explaining different topics would be nice. I wish I understood TS, need to learn it. Got the basic understanding of it.
Nice video as usual :D! I can see some very specific use cases for something like a state machine, but apart from that i have a really hard time seeing why i would need anything else than a unidirectional or atomic state manager, they are so simple to understand and pretty much cover anything i would need. Also as you mentioned i think today with stuff like apollo, react query, urql and react own context i would think twice before bringing a state manager to an application. You can go a very long way without one
I would add Bi-Directional state managers, like MobX to that list. Honestly, the only state manager model IMHO is kind of optional is the event based systems that sit on top of RxJS. Unless you are already using RxJS I would avoid those.
@@victorlongon I like them because I like the spreadsheet paradigm. If i look at a value then update me. If I don't then don't. Though I think the Atomic model better captures the dependency graph aspect of the spreadsheet paradigm.
This is so useful, fantastic Jack as always great content. I love the screen annotations you are doing now. Which software are you using for that effect?
It gives a limited overview about the possible stores touching mostly on APIs styles, but it misses 3 important topics IMO: - Performance - it's just slightly touched in 2 cases (prop drilling, and context API) but never compared - Async complexity ... on Redux - the Redux `fetchNames` complexity is ignored, while it's likely the worst part of Redux (and better in any other library) - Mutability vs Immutability - which might be a deal-breaker Thanks!
Extremely good and informative video. This is a good domain comparison that actually helps (instead of 1vs1). From one side I dislike the idea of not having a standard, official, global state. On the other side I like the amount of different approaches. The main problem I see is that means using the library that fits the style instead of use case/performance. Without knowing each library in depth it's almost impossible to know if an application would benefit from one or another.
What I recommend is that if you are looking at building out a new project and a change in state manager is on the table (it's often not) then spend the time POC'ing a few of these in scenarios that you think are demonstrative of the use cases you'll have, and then see if how they work in those scenarios.
Jack, I only found you recently, but absolutely love your stuff! Thank you for making it! I do have 1 question: how do you use pen input to draw on the stream/content?
I use a cheapy Gaomon drawing tablet, that I actually find a LOT more reliable than the Wacom stuff. It was an HDMI port on it so I can duplicate the screen across both. Then I use ScreenBrush to do the drawing.
No sucking up intended here but do we all owe Jack a cup of coffee yet? Traversy is still the overall king, but Jack is the king of react state. Not only does he put all this in a nice tidy package for you he also 1) has a cool new-ish goatee, 2) has a cool new white board, 3) didn't mention Pokemon once.
Good overview, but I was hoping to see how these libraries are handling complex states, that's where all the troubles start in vanilla react and when you start looking for alternatives. For example let's say you have a state with the dynamic number of button groups, the number of buttons in each group is also dynamic, and each button's state is an object (color, label, etc). Now you want to change a color of button X inside group Y, and you want only that button to re-render. Something like that, where default shallow state comparison stops working and it becomes very difficult to surgically change state and re-render individual components.
There are some really good A/V RUclipsrs out there that cover cameras/mics/technique/etc. Though for educational content like this the old adage applies; content is king. Have decently produced content on topics people want to learn about and you'll get views.
Single best summary of React State Management on the internet, thank you! I am currently switching a lot between Backend and Frontend-work and I was wondering - what is your take on combining Frameworks like React with Clean/Hexagonal/Onion/...-Architecture Principles for Business Logic? (aka, can you please make a video about this particular aspect? :))
I'll add it to the list of requests. Hexagonal architecture is fine. I think Clean and Onion are as well, but I'm not sold on "Clean" since it seems like just bunch of small PR issue fixes and not really a coherent architecture, IMHO.
what about zustand? I find it really easy to use but I used it in small-medium projects. How does it compare to redux toolkit and in you opinion why would you prefer redux toolkit over zustand?
Hmmm looks like the signal repo is too quiet. I guess we can skip it. it is interesting that signal looks like observable with ease and totally outside jsx (good for testing all by state itself, like a node in the browser)
Really great stuff. Thanks Two questions though: 1. Do you know any context like library that's ecosystem agnostic and works with VanilaJS as well? 2. Why you favor React hook form over Formik? I couldn't find any superiority or benefit in RHF but the burden of creating so many refs.
Most of these libraries support external non-React access. But IMHO, what you would be looking for is a library that is not bound to React directly. But which can be can be bound to a React app using hooks. Redux meets that bill, as does MobX, and Effector, as do some others. Some of the newer, lightweight state managers, like Recoil, Jotai, Valtio, Zustand are directly bound to React. So you need to bring in React even if you don't use it. As for form handlers. personally, I lump those in with systems like React-Query, and it's totally valid to just use React hooks + (formik/react-query/etc.) if that meets your needs.
There was a subtlety, and it might be fixed now, with XState, that the useMachine hook instantiated a machine on its own. So you can instantiate another version of the same machine and connect to it externally. But if you use useMachine you'll be using the instantiation of the machine that it creates.
16:10 Looks like there's a tweet recently stating that it's wrong. But can I know, whether it's because React has just improved Context recently, or it works like that the whole time? and by "works like that" I mean if using correctly will only rerender the necessary components that subscribe to that context?
Could you expand on the concept of separating business logic as a custom library from React? I think I agree with the concept, but what is an example of what that might look like?
Imagine you have a chrome extension and a nextJS web app that are in a mono-repo and they both calculate taxes with some complex business logic. I would use the mono-repo functionality to extract that tax calculation logic into its own package and then have independent jest tests for that package.
@jack, but mostly you would'nt have such apps. Most of the the times you have a single app which has business logic. How would you go about separating logic in that case?
@@Messirobben047 How, or why? How is I'd use something like Turborepo or NX to factor out the business logic into its own library. But I'd only do that if it was almost a guarantee that we were going to reuse that logic in another context, either in another web application, or in a React-Native app, etc.
I did a udemy course for a full stack project where the instructor used MobX and since then I have not been able to use other state management tools to that extent. I want to use redux toolkit but I am not confident using it. Many say that redux is good for large scale applications but I am more familiar with MobX so I am not sure what to use for a professional project.
I liked it, but you need to take into account how easy they are to unit testing, it is an important factor in teams that do a lot testing or TDD, it is not the same developer experience when test mobx, redux, or xstate. Do you have any video about it? Thanks and Greetings
Thanks for the research! I have to admit, it's not that easy to follow all the differences and especially what are the real reasons to use one of the 4 flavours (not just personal preferences). 1. For instance, which of these models make it harder to debug complex apps? (do observers/subscribers cut us of a way to see what caused a specific change? ..) 2. Do you think it's safe to judge about the amount of ceremony by the simple example provided (extrapolate to large apps), 3. or may be you see some differences in scalability and decoupling logic modules? 4. Is there any performance differences to be aware of? They are probably neglectable compared to not using a provider for global state that causes re-renders per any value change, aren't they?
Jack, your level of detail and research is second to none. Through your videos, I feel i've become a better problem solver and decision maker. A big thanks
Thank you!
Great video. Important addition for everyone watching this: Don't use state managers for fetching data, use React Query and you will find that probably 90% of your state is actually server state. And React Query is handling refetching, loading state, errors and caching for you out of the box.
Can you elaborate? What if I got an e-commerce app with a cart?
@@belkocik When a user is logged in, you store their cart on the server anyway. When adding an item, use useMutation to send a request to add item on the server and automatically refetch all items in the cart. When the user visits the site again, use useQuery to get all the items in the cart.
@@GVal98 What about if user is not logged in? How to handle the problem when a not logged in user added a few items to a cart and then logged in? The question is what if there are items on the server that he added previously when he was logged in? Fetch only the items from server and show them in cart or compare the items in local storage with the server's one and do what? :D How to handle the issue? Would love to see some code beacause I don't know how to do it :D
@@belkocik Either when adding items, you can ask the user to login to add items.
Otherwise, if some items have been added to the localstorage, as soon as he logs in, add those new items to the server as well (need not update the existing items in the server)
@@belkocik You can generate a guest id/session/token and use it in requests just like a regular user id. But the server must be ready for this and distinguish users from guests.
As for the second question, you just do it like you did before with your state managment. I think it's up to you whether you want to combine items or just download from them the server.
Using an expression in the dependency array is something i probably would never have thought of! Seems like a super useful technique though! Thanks for that! Also, love zustand especially in combination with immer once you get used to the mental model!
I loved that also!
What do you mean "expression in the dependency array"? Where is that, I missed it.
@@vitorisaia Where is it, I missed it.
@@deansacramone6270 He starts talking about it at 6:50
React hook lint rule complains about having an expression in deps array. You would have to extract it to a variable and use that instead. Or excuse the rule there.
Simply great presentation. I've done some research myself about different libs available for state management, but most of the resources out there compare just a couple of libs. You on the other hand compared almost exhaustive list of state management libs and concepts, giving the ability to distill those concepts into different categories. This is an amazing work with a huge value that I don't belive I can get anywhere else in one single place.
Great presentation!
And I love that you've also added your personal views at the end, adding more flavor to it, that is also based on relational thinking and business consideration.
Awesome content!
Keep em coming...
Thank you! I really appreciate the thoughtful comment!
I have been developing react app for couple of years. But watching your videos makes me re-think about my prod code, and I definitely get some improvements and refactor in the code base !
Man you are legend for preparing clear and concise content. Keep up the hard work ❤️❤️
The effort put into this single video is unreal 🤯
Would love to see a video on your point about business logic along with some examples of architectures/patterns that should be considered to keep it externalized.
simply insane comparison. Im lost for words and the repo for free to go over it. You are a legend! I've been working as a full stack dev for a couple of years now, and yet only came across local and global state implementations. Hopefully with time and practice will get to the level of thinking in architectural way. Props for another great video
Actually fantastic work here, we're in the transition of deciding what state manager and model should we go into our business application, and it creates a lot of fuss and confusion, this video's very very interesting and really perfect timing for us :)
Which one did you finally go with?
You are such a good teacher, thank you for sharing your knowledge with us. I love your calm demeanor and way of communicating ideas!
I just appreciate that you're are experimenting with your content. Great work.
I just came across to this video by a coincidence, but it is really good stuff! I am just surprised why it doesn't have more views, your presentation (as well as the code) is very clean plus the value I get from it considering the length of the video is excellent!
Hello Jack, I really appreciate your video quality and subjects you're generally covering. I had a topic that could be of interest to many JS coders; namely "How to set up a NPM module with typescript types and codes that are reused between different project we're working on". Maybe you've already covered it? In all cases, enjoy 2022! (PS: I totally share your API+ approach but with React-Location as router plus I tend to avoid any state manager but using React-Query and the React-Location search URL as a replacement)
Thank you for the excellent content! Can you do a video on the best practices to keep business logic separate from state management and api calls ? Maybe while using something like react query and redux toolkit?
Best overview of current state managers yet! Great work :)
Thanks Jack. This categorization is really helpful 🤘
Incredible how much work and how informative this video is. Thank you Jack, for all the value you share!
wow, you covered what most people don't think, thank you
Learning RTK Query for a job interview and your content has been super helpful!
thank you for marking this video.
just 1 minute into the video, another instant thumb up for the great job from Jack!
Love your style of teaching and explaining, Jack. Cheers
Wow, excellent information - thank you. I've been digging deeper into React after having used Vue professionally for the last two years. Such a comprehensive rundown of all of the various state management solutions in the React ecosystem is incredibly helpful. Even if I may not ever use all of them, I certainly appreciate better understanding what my options are.
Looking forward to more of your content.
Great stuff, can't thank you enough. Happy new year, Jack
Happy New Year to you!
Incredibly clean explanation, thanks a lot
Thank you for making this video. Saves me a bunch of time, but still alot to think about :-)
Awesome demo, I remember your writings about adobe flex few years ago what a memory, it is not strange to continue this success and the continuous learning and development journey, keep on Jack.
Ahhhh, Flex. Some good ideas there.
Yeah , I recall components and interfaces same concepts applied now, it was glorious days ...✨
Adobe flex. Good old days 😅
can Cairngorm puremvc robotlegs model works in react world?
@@nshen121 Wow, it's been a really long time since I heard about the Cairngorn framework.
Thank you for such an excellent video Jack. Really informative 👍
A little question, it would be nice if you could explain a bit more about separating the business logic of the code source, because I cannot imagina a way of doing that.
I'm going to check in the videos of the channel to see if there is one video about that :)
Great video Jack! Hope you're doing well!
Amazing tutorial, Thanks Jack.
I'm really enjoying Jotai. Great video, Jack!
This video was really informative. Thank You!
Great informative content. Thank you for sharing. You break things down really well! Would love to see some intermediate level Nextjs stuff!
Hi Jack, I use React Context + React Hooks. Wow, you really covered the topic :)
34:15 unidirectional is easier for extendible builds also and Redux helps for immutable state changes with common practices
Thanks! great video as always, (seems also you can apply to editing job now 😉).
I would love to see an example how to separate the business logic from react.
- What parts you would put in a custom Hooks and what part will remain separated .
I don't have a simple example of code to be a use case for that, but I will do my best to help if you want to make a video example.
And talk about your new book, I would love to hear about it.
those graphics are spot on
great overview
great review + huge work done on github project. thx
Great Content. I prefer to use relay for both the API and state management if I have some type of api i am working with which is usually the case
Really really cool video, thanks for the guidance!
Great work.
impressive ,i find it quite useful thanks for your effort
Great content, thank you. I personally use Apollo Client, React Hook Form and also Reactive Variables from Apollo client to handle the Client side state. I used to couple Apollo Client with React context, until Apollo came up with reactive variables, so I don't introduce another state management tool anymore, and just handle everything with Apollo Client.
Thank you for bringing this to my attention. It’s really cool to see that functionality in the Apollo client.
Great video and there’s a lot you covered I’m bit surprised that you didn’t cover Recoil
I did, actually.
@@jherr My bad and I have no idea how I skipped past Recoil that I was looking for :D. Nice and concise across the board review/intro to state management.👍
@@AbhiVenture No worries man. BTW, if you like Recoil you will LOVE Jotai.
wow, that was great!
Excellent demo. Thanks.
Nice hard work
Thanks !!
saved my messed up brain 🤯 really thanks
Thank you very much!
Really like the video!
Should be worth noting that while Akita is still maintained, the developers started a new project called Elf to use instead. Reasoning just they wanted to do more updates but it would break too many apps using Akita.
Seems like long term Elf is their go to.
Cool, I'll check that ou!
I love working with MobX but most devs prefer Redux and now when you showed how Redux Toolkit works and how less boilerplate it needs, I believe I will choose it as the main one (dependent on business needs of course)
To me, the best state management library is SWR!
You're a React God! Please keep making content! I'll check your page out. If you haven't already please make videos on Svelte and NextJS!!
Jack glances at the product requirements and picks one state manager and never regrets it. He is familiar with every state manager out there. 🤯
Mostly just Zustand nowadays.
Always loves your videos, Jack.
Your a stud, keep doing this quality content and you will hit 1million subs.
Only suggestion, some shorter "starter" content explaining different topics would be nice.
I wish I understood TS, need to learn it. Got the basic understanding of it.
I do have an entire series on TS ruclips.net/p/PLNqp92_EXZBJYFrpEzdO2EapvU0GOJ09n
Nice video as usual :D! I can see some very specific use cases for something like a state machine, but apart from that i have a really hard time seeing why i would need anything else than a unidirectional or atomic state manager, they are so simple to understand and pretty much cover anything i would need. Also as you mentioned i think today with stuff like apollo, react query, urql and react own context i would think twice before bringing a state manager to an application. You can go a very long way without one
I would add Bi-Directional state managers, like MobX to that list. Honestly, the only state manager model IMHO is kind of optional is the event based systems that sit on top of RxJS. Unless you are already using RxJS I would avoid those.
@@jherr I don't know i am not a big fan of the 2-way streets tbh, but really is just my opinion 😃
@@victorlongon I like them because I like the spreadsheet paradigm. If i look at a value then update me. If I don't then don't. Though I think the Atomic model better captures the dependency graph aspect of the spreadsheet paradigm.
Impressive amount of work 👏
Hello, very valuable Overview, Thank You!
This is so useful, fantastic Jack as always great content. I love the screen annotations you are doing now. Which software are you using for that effect?
It gives a limited overview about the possible stores touching mostly on APIs styles, but it misses 3 important topics IMO:
- Performance - it's just slightly touched in 2 cases (prop drilling, and context API) but never compared
- Async complexity ... on Redux - the Redux `fetchNames` complexity is ignored, while it's likely the worst part of Redux (and better in any other library)
- Mutability vs Immutability - which might be a deal-breaker
Thanks!
cool video! thank you Jack! I can't convince myself to try Akito. too much boilerplate. also classes and decorators are intimidating
Sometimes it's worth giving stuff a try just to get a sense of the style of it.
This is really helpful, thank you
Great video. Thanks!
great one, thanks!!!
Extremely good and informative video. This is a good domain comparison that actually helps (instead of 1vs1). From one side I dislike the idea of not having a standard, official, global state. On the other side I like the amount of different approaches.
The main problem I see is that means using the library that fits the style instead of use case/performance. Without knowing each library in depth it's almost impossible to know if an application would benefit from one or another.
What I recommend is that if you are looking at building out a new project and a change in state manager is on the table (it's often not) then spend the time POC'ing a few of these in scenarios that you think are demonstrative of the use cases you'll have, and then see if how they work in those scenarios.
Thanks a lot for the great video!
Thanks for the great content Jack. Can you may be create a video on how would you decouple business logic in a react app?
Jack, you say principal full stack engineer. Would like to see some stuff focused on back-end as well 🙂. Nice video by the way.
I just did one on Wundergraph about GraphQL API architecture, you should check that out.
Jack, I only found you recently, but absolutely love your stuff! Thank you for making it!
I do have 1 question: how do you use pen input to draw on the stream/content?
I use a cheapy Gaomon drawing tablet, that I actually find a LOT more reliable than the Wacom stuff. It was an HDMI port on it so I can duplicate the screen across both. Then I use ScreenBrush to do the drawing.
@@jherr thanks for taking the time to reply! Much appreciated!
@@SnOrfus That's what I'm here for. :)
Zustand n react query used together are the best
You try it with Valtio or Jotai?
this is a masterpiece
No sucking up intended here but do we all owe Jack a cup of coffee yet? Traversy is still the overall king, but Jack is the king of react state. Not only does he put all this in a nice tidy package for you he also 1) has a cool new-ish goatee, 2) has a cool new white board, 3) didn't mention Pokemon once.
Hahah. All Pokemon next week! (just kidding)
Good overview, but I was hoping to see how these libraries are handling complex states, that's where all the troubles start in vanilla react and when you start looking for alternatives. For example let's say you have a state with the dynamic number of button groups, the number of buttons in each group is also dynamic, and each button's state is an object (color, label, etc). Now you want to change a color of button X inside group Y, and you want only that button to re-render. Something like that, where default shallow state comparison stops working and it becomes very difficult to surgically change state and re-render individual components.
Thanks very much for sharing
Great content!!
Just found out hookstate and was hoping to see it here. It seems to be the easier to implement, at least for me.
This is so good - thank you :)
By the way Jack, did you do any specific courses for prodcuing such great RUclips videos or you just learn on the go?
There are some really good A/V RUclipsrs out there that cover cameras/mics/technique/etc. Though for educational content like this the old adage applies; content is king. Have decently produced content on topics people want to learn about and you'll get views.
Single best summary of React State Management on the internet, thank you!
I am currently switching a lot between Backend and Frontend-work and I was wondering - what is your take on combining Frameworks like React with Clean/Hexagonal/Onion/...-Architecture Principles for Business Logic? (aka, can you please make a video about this particular aspect? :))
I'll add it to the list of requests. Hexagonal architecture is fine. I think Clean and Onion are as well, but I'm not sold on "Clean" since it seems like just bunch of small PR issue fixes and not really a coherent architecture, IMHO.
here is some frontend video content i love to see
what about zustand? I find it really easy to use but I used it in small-medium projects. How does it compare to redux toolkit and in you opinion why would you prefer redux toolkit over zustand?
Check out the code. Zustand is awesome.
@@jherr what about jotai? :)
In addition to react-query, swr is also a good choice!
Absolutely!
Awesome! Could you do a tutorial about using signals from preact, please?
Hmmm looks like the signal repo is too quiet. I guess we can skip it.
it is interesting that signal looks like observable with ease and totally outside jsx (good for testing all by state itself, like a node in the browser)
Thanks, is was big help
You're an absolute don!
Really great stuff. Thanks
Two questions though:
1. Do you know any context like library that's ecosystem agnostic and works with VanilaJS as well?
2. Why you favor React hook form over Formik?
I couldn't find any superiority or benefit in RHF but the burden of creating so many refs.
Most of these libraries support external non-React access. But IMHO, what you would be looking for is a library that is not bound to React directly. But which can be can be bound to a React app using hooks. Redux meets that bill, as does MobX, and Effector, as do some others. Some of the newer, lightweight state managers, like Recoil, Jotai, Valtio, Zustand are directly bound to React. So you need to bring in React even if you don't use it.
As for form handlers. personally, I lump those in with systems like React-Query, and it's totally valid to just use React hooks + (formik/react-query/etc.) if that meets your needs.
@@jherr Thanks
Thanks for awesome content
I like XState because when I tell laymen I'm building finite state machines they think I'm smart
It does sound very cool.
window - is the best state manager
31:44 Why did you put FSM / XState as not possible to execute outside the React context (Global)?
There was a subtlety, and it might be fixed now, with XState, that the useMachine hook instantiated a machine on its own. So you can instantiate another version of the same machine and connect to it externally. But if you use useMachine you'll be using the instantiation of the machine that it creates.
16:10 Looks like there's a tweet recently stating that it's wrong. But can I know, whether it's because React has just improved Context recently, or it works like that the whole time? and by "works like that" I mean if using correctly will only rerender the necessary components that subscribe to that context?
Could you expand on the concept of separating business logic as a custom library from React? I think I agree with the concept, but what is an example of what that might look like?
Imagine you have a chrome extension and a nextJS web app that are in a mono-repo and they both calculate taxes with some complex business logic. I would use the mono-repo functionality to extract that tax calculation logic into its own package and then have independent jest tests for that package.
@jack, but mostly you would'nt have such apps. Most of the the times you have a single app which has business logic. How would you go about separating logic in that case?
@@Messirobben047 How, or why? How is I'd use something like Turborepo or NX to factor out the business logic into its own library. But I'd only do that if it was almost a guarantee that we were going to reuse that logic in another context, either in another web application, or in a React-Native app, etc.
Thanks @jack for covering this topic. May you let me know which vscode theme you have used here?
Night Wolf [black] and Operator Mono for the font.
I did a udemy course for a full stack project where the instructor used MobX and since then I have not been able to use other state management tools to that extent. I want to use redux toolkit but I am not confident using it.
Many say that redux is good for large scale applications but I am more familiar with MobX so I am not sure what to use for a professional project.
What? How many? Damn... I knew maybe like 3
I liked it, but you need to take into account how easy they are to unit testing, it is an important factor in teams that do a lot testing or TDD, it is not the same developer experience when test mobx, redux, or xstate.
Do you have any video about it?
Thanks and Greetings
VERY NICE!
Thanks for the research! I have to admit, it's not that easy to follow all the differences and especially what are the real reasons to use one of the 4 flavours (not just personal preferences).
1. For instance, which of these models make it harder to debug complex apps? (do observers/subscribers cut us of a way to see what caused a specific change? ..)
2. Do you think it's safe to judge about the amount of ceremony by the simple example provided (extrapolate to large apps),
3. or may be you see some differences in scalability and decoupling logic modules?
4. Is there any performance differences to be aware of? They are probably neglectable compared to not using a provider for global state that causes re-renders per any value change, aren't they?