State Management with Jotai: Pirmitive and Derived Atoms in Action

How can you manage your React application's state with Jotai. What is the atomic approach that Jotai takes to the global state management? How can we combine atoms to create more complex logic for our state? What are Primitive Atoms and Derived Atoms?
- timestamps -
00:00 - Intro - What is Jotai?
01:02 - How to install Jotai?
01:31 - Creating "Primitive Atom"
03:53 - Reading state with "useAtom" hook
04:36 - Creating controlled input with Jotai
05:45 - Intro to "Derived Atoms"
06:51 - Creating "Derived Atom"
09:06 - Setting another atom with Derived Atom
12:06 - Reading another atom with Derived Atom
15:17 - Creating "sorting functionality" with Derived Atom
Source Code: github.com/batuhanbilginn/jot...
Learn more: makr.dev
#react #statemanagement #nextjs #jotai

[@berniko4954]

Nice

[@laurentlahmy277]

thanks

[@vatansrivastava7279]

Your video contents quailty are on another level man, Amazing.. If possible please create any big clone app using in next js, typescript, rapid api, jotai for absolute begineer who only knows react

[@makrdev]

Thanks a lot! It’s on my list. Which app do you want me to clone?

[@vatansrivastava7279]

@@makrdev In which you can cover all the topics to become better programmer.

[@olabisiolaoye6168]

Thank you so much for this video! I'm having an issue with atomWithStorage, though. I saved some data to local storage with this, and I tried using this in a protected route component with the condition that if that data is available in local storage, the user can access that route, otherwise they are redirected to the root route. The problem is that when I use useAtom to retrieve that data in the protected route component, it doesn't get it fast enough and the user is redirected to the root route anyway, even though that data is actually present in local storage. How do I make sure the data is retrieved in real time?

[@makrdev]

Actually it’s very hard to understand what you are building without code or more context. Seems like you need a loading state. Create another state for loading and wait until you get the data.

[@olabisiolaoye6168]

@@makrdev Adding a loading state actually worked. All I had to do was find a way to stall the retrieval of the data. Thank you so much!

[@vatansrivastava7279]

and from the upcoming video increase the font size of vs code, its hard to see what you code on my laptop 😃

[@makrdev]

Yeah, you are right. I fixed on latest videos 👍