State Management in React Will Never Be the Same

Looking for a better way to manage global state in your React apps? In this video, we explore an innovative React state management library that simplifies your workflow while maximizing efficiency. Discover how atomic state works, why it's a game-changer for developers, and how you can implement it in your projects with ease. Whether you're building small-scale apps or large enterprise apps, this tool will revolutionize the way you handle state.

The tool/library in question is Jotai. In this video, you'll learn what Jotai & atomic state is, how to get it into your app, how to create and access atoms, and how to scope atoms to create instances that are non-global.

Timestamps:
0:00 - Intro
1:05 - Creating an atom
2:29 - Atom example
4:00 - useAtomValue & useSetAtom
5:36 - Global example
7:09 - Global example 2 (navbar)
10:18 - Atom Scoping (Non global)

[StCost]

Much better than props drilling, love it. That's what I expected React.Context to actually work like, nice

[cloudagnostic]

Wow! I’ve always hated handling state in react. I always used prop drilling, but this makes me want to get back into coding again! Great video!!

[rnni]

Nano store is awesome as well.. it's small reactive and works with react, solid, native js or any famous framework.
Great fit for. Small to medium size projects.


If you use nano store with Astrojs the store you can be shared between frameworks.. you can make a change in solid component and react component will re-render if needed

[KeganVanSickle]

This is awesome. It makes me want to remove my context providers. Great video, subscribed!

[IncomingLegend]

great video! I like that you get to the point! I tried to like zustand but it felt weird and cumbersome however jotai seems like a way better fit for me!

[furycorp]

Jotai is same creator/maintainer (dai-shi) as zustand which you mention. He has writeups that help explain which library to use depending on requirements.

[ariolkeubeng]

you saved my shift to NextJS. React State management was holding me back to Angular.

[TacticalCheetaGaming-wk]

zustand and zotai developed by the same person so both have place

[bwsstha]

Thanks for enlighting me about this awesome library. It was a great video. I would want more indepth video about jotai with complex state like non-primitives and other feature provided by Jotai with real world example.
Also if possible would you please share Jotai optimized version so that there is no un-necessary re-render like Jotai's focusAtom or selectAtom.

[jaycodes]

Thank you very You explained very well 👍👍

[wonjaehwang]

So if you want to use the global state you need to always import the original atom() to the component

[pexeixv]

So it's just global state? Does it have anything similar to Thunk in Redux? Even if it does not, I can see where Jotai will be useful.

[ChArham-bsne]

Jotai seems very easy to use, with not much of a setup. But having a bunch of global states worries me for the performance. Personally, I like useImmer and useImmerReducer. I don't mind setting up the reducer function once, and Immer helps with the immutability problem that native reducer had.

[mihkuno]

thats very elegant compared to zustand when setting inital states

[bariqdharmawan]

Can you show us your code? I wanna learn it more detail especially the code inside <Card/> component

[dugtrioramen]

Valtio is even crazier. It's also another poinandres react state manager

[reallions]

It’s simple but it could get difficult to handle if you have many levers

[profesor]

State managers based on atoms are good only on examples or when they are simple. But having many atoms, on medium or large projects, can make the state management code realy messy. Especially when you read code after a few months xD

[SonAyoD]

Zustand is just a this with more bells and whistles.

[MohamedAzizKhayati]

Preact signals is much better and less bloated.