State Management with Jotai: Hydrate Atom with Server-side Initial State

In this video we will explore how we can use Jotai's "useHydrateAtoms" hook to hydrate our atoms with the server-side data. This method helps us avoid prop-drilling as well as unnecassary re-renders in our application.
After we finish implementing "useHydrateAtoms", we will focus on two utilities from Jotai: "focusAtom" and "selectAtom" These utilities will help us avoid re-rendering the components that we don't update.
I hope that you like this video and if you do, please don't forget to subscribe my channel and if you have any question please leave it as a comment!
- timestamps -
00:00 - Intro
01:09 - useState version
03:50 - useHydrateAtom
07:55 - Prop Drilling
19:00 - selectAtom
24:40 - focusAtom
29:11 - Further Optimisation
31:33 - Outro
Source Code: github.com/batuhanbilginn/jot...
Learn more: makr.dev
#react #statemanagement #nextjs #jotai

[@xolanimethula8472]

Valuable video, Please try to zoom in on your next tutorial.

[@enesdemirci7963]

Hocam simdi nextjs13 ile bi blog yapiyorum state manager olarakda jotai kullaniyorum , dark light mode yaptim true false degeri degisiyor ama sayfa refresh olmadan renk degisimi olmiyor , hydretaiton kullanmam mi gerekiyor nasil cozebilirim

[@makrdev]

discord.gg/hxhaxFYk gel buradan konuşalım daha kolay olur.

[@shinauri1]

Great video sir. But I have question: is it a good idea to completely abandon props and tie every component to Jotai? How then to reuse such components?

[@makrdev]

This is not applicable for every component. If you need to reuse the component you can create an atom and pass as prop to consume in the component or you can create more advanced logic such as atom families etc. in order to create reusable state logic. If you can avoid using props and it doesn’t break your logic yes it’s a good thing otherwise build what you need.

[@lokifurian]

But since it's a client component, the state is undefined on the server until on the client right?

[@makrdev]

Yeah it handles suspense and other things. I’m not sure how it works with RSC tho.

[@lokifurian]

@@makrdev yeah because if I log, the terminal which is server side logs undefined. 🤨 There does not seem a way to fill the initial data server side in a server component unless i am missing something? This is using the next js app directory btw.

[@makrdev]

Join discord I can help you in there.