Rebuilding Jotai State Manager for React in 20 Minutes!

Code: github.com/jherr/jotai-rebuild
Daishi's Tweet: / 1484835169475653634
Daishi's course on Jotai: daishi.gumroad.com/l/learn-jotai
Jotai Docs: jotai.org/docs
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:04 Jotai Introduction
2:46 Creating The Core Atom
5:21 Creating The Hooks
10:32 Enabling Computed Atoms
15:48 Enabling Async Atoms
19:36 Outroduction

[@bekirs4240]

This type of content is exactly what we need. We don't need more beginner stuff, this is where you learn

[@puneetsingh9678]

💯 !

[@MahbuburRahman-uc7np]

For a Junior/Mid-level developer, this Content is GOLD. This is the type of content someone like me needs to level up.

[@ionelLupu_]

I have 10 years experience of web development and I still find this type of content GOLD 😂

[@dprophecyguy]

Will appreciate more build from scratch videos.

[@WikiPeoples]

This is EXACTLY the content we NEED! No more noobie stuff, but dive into deeper topics like this. LOVE IT!

[@HeinekenLasse]

Amazing! The computed atom part was a bit tough to follow, but that's exactly the type of content we need, something a bit more challenging than the never ending newbie tutorials.

[@karolwons8566]

What a great video! I look forward to seeing more advanced stuff like this on your channel.

[@revillsimon]

Your content keeps getting better, Jack! Fascinating, and I especially like how you explain the reasoning about the types. 😊

[@geralt36]

Ooof that was some fab content Jack. Learned so much. Thanks a ton!

[@andrerego2611]

That was amazing! I've never seen content like this, thanks!

[@awekeningbro1207]

I really love videos like this. Thanks Jack! This really helps us to understand the core better. Really love to see more videos like this

[@manny8156]

I’ve learned most of the advanced things in react from you. Thank you so much!

[@igboanugwocollins4452]

This is tricky and exciting at the same time! Thank you very much

[@mgrahim5018]

We need more of this. Now, I'll probably have to come back to this video untill I grasp all the concept. Thank you

[@joshreynolds4164]

Hands down best channel on youtube right now in the React space. We thank you!

[@Fedjz]

What such quality content! Glad to be subscribed to this channel :)

[@umitdemir3741]

You and your contents are really amazigng. Thanks for all of them!

[@Dgiulian]

I loved the video. Keep making this content. This is pure gold

[@petrhavlik]

Excellent stuff Jack, please keep going!

[@Echoes2165]

Another amazing tutorial. This one might take 2 rewatches and reimplementing it myself before it really clicks in - can't wait!

[@MsPrakhar12]

pretty awesome 🔥 Amazing work

[@JGBSolutions]

I liked it. I gotta watch it more times to get it right. Keep 'em coming.

[@bartek...]

Thanks for your work. Another very valuable video.

[@Dev-Coder]

Amazing content!❤️

[@qodesmith520]

My man, you got the like, subscribe, AND I rang the bell. This was amazing.

[@vonderklaas]

Thanks Jack, captivating as always!

[@kasvith]

Great stuff as always

[@vasilicampuica6428]

Great content, Jack!

[@erikslorenz]

I've been loving Jotai thanks Jack

[@vcothur7]

This is amazing!

[@dhaw]

just amazing !!!

[@user-jb9wp9vf3h]

Enjoyed your video, thank you.💯

[@WrongAkram]

You’ve easily become my favorite creator here!

[@permanar_]

What? Are you finally remember your YT password? You both are my favs content creator bro, I hope you keep that good stuff coming. I've been waiting for those another Framer Motion stuff. And maybe some GSAP if possible! Haha.

[@aslamjm]

when i look into youtube webdev tutorial hell all i see are baby level react tutorials with todolist like application. This is the fresh and interesting content most people here need. Thanks Jack keep up the good work

[@thiagomoraes791]

great content 😀

[@tolgask2812]

wonderful content :D

[@lautarodapin]

that was so cool! I didn't imagine that it was so simple, like a svelte stoore

[@jamshediqbal7936]

Good channel to learn advanced topics 🎉

[@shivamjhaa]

This is really really cooool!

[@elmalleable]

jotai will be fun, will solves some promise headaches on a project

[@rameshramesh-bd2wu]

Need more videos like this talking about internal function of the system is literally watching a crime thriller movie

[@luizpaulonascimento9162]

awesome content

[@mohamed_elmardi]

Amazing!

[@lilpodbebe]

Pure gold!

[@feitan8745]

Impressive as always, currently i'm using custom reducers for my apps and the setup is quite the same.

[@mdjaman7348]

love you bro

[@gencomer]

Very impressive

[@jasondavis87]

I love this!!!

[@saiyanrivals]

Awesome

[@eliasimokhai]

This was tough and fun

[@realbigsquid]

100 percent mind blown

[@ivanglpz]

Nice Video about jotai core. I would like to see to daishi kato and Jack Herrington talking about jotai in the future.

[@deamorta6117]

GOLD GOLD GOLD content

[@jeresalem]

Awesome.

[@fricze]

cool stuff

[@abhishekvishwakarma9045]

Thanks a ton, each video you made is a new learning experience for me , btw I think we can use the `instanceof` operator to check if the return newValue is a Promise object like so ``` if (newValue instanceof Promise) { // Promise } else { // not a promise } ```

[@rkrupinski]

Great video, Jack! I think I see a subtle bug in the implementation though. Looks like we're continuously re-subscribing (in the `get` function), which makes the number of subscriptions grow exponentially.

[@fhucko]

I am currently using Zustand in project i work on, but Jotai seems even more simple. I will try to switch to it. Thank you

[@tawalioualao7444]

Zustand is more centralized store while Jotai is small store (like react context) so it's depends on your need

[@rebeccakeller4666]

I'm using both in same project. I much prefer jotai over all (and useReducerAtom sure does blur the line too). But when I thought I'd go all-jotai I got bit by rerenders. With zustand you can use a single properties of a huge single object and subscribers (ie useFooBarStore)only get updates if the selected prop changes. With jotai, all subscribers (even with derived atoms) get pinged. That to me is the biggest difference. Still much prefer jotai but as I was basically trying to figure out how to reimplement zustand in jotai I reverted that particular but and use both, preferring jotai as a rule though. There is a jotai library that is supposed to allow you to use sub atoms like that but I couldn't get it working but maybe I'm just dumb idk

[@fhucko]

@@rebeccakeller4666 I just checked documentation, I think you are supposed to slect part of atom using focusAtom function. Or selectAtom for read only data.

[@fhucko]

@@tawalioualao7444 I use zustand with many decentralized stores using useState. I have also few global stores, but most are scoped in components.

[@rebeccakeller4666]

@Filip Hučko ah yes thats he library I was thinking of (focusAtom is in another npm package and i cant recall the problems I had exactly). I think actually that selectAtom (which is in jotai primary package) mightve done the trick but I missed the equality operator function as the third parameter - so perhaps there is a cleaner way to do it.

[@WajuAbolarin]

This is amazing content. and to get this for free. thanks Jack!

[@user-qp4fm7ue6y]

Your content is really great, And I really like it. This video in particular is exactly what I needed, so I agree with all the other commenters. By the way, it is important to note here in a prominent place that the code is not ready as it is, and its actions grow exponentially, very quickly it will cause every key press to millions of actions and the browser to crash, because within the get function you are always subscribing but never unsubscribing, So each run is subscribing again the existing function, which are getting doubled each run. the solution is either to add a key to each atom registration as in the original recoil and then check if it already exists, or use JSON.stringify on the ATOM and check if it already exists using another set.

[@joshreynolds4164]

Good point. Could you provide an example of this?

[@elmalleable]

@@joshreynolds4164 learnt that the hard way rebuilding this with rxjs, solution is keep a set or map of subscriptions and only subscribe once for the specific atom, add it to the list of subscribed atoms and do not subscribe if a subsciption already exists for it, found that out through simple test cases i made

[@user-pw4oq9cs3l]

amazing video, thank you !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@Ste00I]

I actually use the sidebar always on the right in VSCode. It just feels more natural to me glancing on the right, instead of on the left.

[@andrepadez]

you're a GOD among men

[@bosung90]

Would love to see jotai's onMount as well as jotai-effect

[@ToreyLittlefield]

Challenge accepted 🔥🔥

[@CrazyWolf132]

It would be super cool if you could do the same kind of video for creating a system like `react-hook-form`.

[@samsurya283]

Awesome, could you please make a video on two way binding

[@streamoverlayprocodes6890]

aha! I see you doing semantic names for type definitions on generics! someone is watching Matt Pocock

[@download333]

One little hair change and my man looking like the mayor of Pleasantville

[@parassharma7041]

A scientist keeps experimenting with react 😃

[@charliematters]

That was great and really easy to follow. Is that copilot doing all the magical autocompletion?

[@jherr]

Yep. With a serious helping of me since that was the second time around so Copilot was repeating a lot of my back to myself. :)

[@charliematters]

@@jherr I did think it was even cleverer than I expected!

[@greatauntmuriel]

explorer on the right is superior

[@MouseCodes]

hey jack nice content, I hope you make a video about how to make a profile for users and enable them to update their info with zustand and nextjs protected routes. this would be really helpful.

[@jherr]

That seems awfully specific. Is that what you are working on currently?

[@MouseCodes]

Yeah and KZbin has nothing like that most tuts only scratch the surface of zustand which makes it hard to use this un-opinionated library.

[@MouseCodes]

It's specific but it is needed for every project whether it is e-commerce, freelancing site, social media, etc...

[@jherr]

@@MouseCodes No worries. And you're right, auth is needed for pretty much every site. Have you tried NextAuth? Generally I let that manage the user and then on the profile page I would get the profile data during SSR and preload react-query with the profile information, then use RQ later to update it through an authorized API route.

[@MouseCodes]

That's exactly what I am trying to achieve, that solution was definitely inspired by your videos.

[@thecodecatalyst]

File tree on the right is the way

[@GachiTscho]

This should go to Jotai official docs🤣

[@jr-hp7er]

This is awesome. I love this. This is precisely what is needed. I have 1 question where I want to implement a Modal window with the form elements, and when I close the window and re-open it again, I want to display data selected by the users previously. Can this help or do we require some sort of persistence here? I have tried with redux, wrapping the parent component above the modal, and it works fine? But want to move from redux to something like this

[@jherr]

I would strongly recommend going with Jotai instead of using this code. This code was presented as a way to more deeply understand how this one particular model of state management works, not to actually replace Jotai. TBH, any state manager, including Redux, will handle the scenario you present. I recommend pushing on with redux. Use the redux toolkit if you aren't already. And if you get stuck on modeling then this then ask for assistance on Reactiflux, but make sure to follow their rules before posting.

[@jr-hp7er]

@@jherr Thank you so much 🙏

[@bradleyangusmorgan7005]

🎯 Key Takeaways for quick navigation: 00:00 🚀 Jotai is introduced as an atomic state manager for React, similar to Recoil, and the video begins with a challenge to rebuild it. 01:09 🧩 Demonstrates how atoms in Jotai can be any data type and used throughout a React application, providing a global state. 03:15 🔧 The structure of an atom is outlined, including methods for getting, setting, and subscribing to changes in its value. 05:17 🎣 Explains the creation of the `useAtom` hook in Jotai, which integrates the atom with React's state management. 08:00 ✨ Showcases the use of the `useSyncExternalStore` hook to simplify state synchronization within the React ecosystem. 09:36 🌐 Jotai allows for the creation of global data that is easily accessible throughout the component hierarchy and is simple to implement. 10:35 ➕ The 'total salary atom' in Jotai can calculate derived state, such as summing a salary and a bonus, using getter functions to access other atoms' values. 12:05 🔄 Jotai's atom types can be dynamic, meaning an atom can be a function that computes its value based on other atoms, and TypeScript can be used to ensure type correctness. 14:10 🔄 The video demonstrates how to ensure atoms re-compute their values when dependencies change and how to avoid unnecessary computations. 15:44 ⏳ Jotai supports asynchronous atoms, which can perform operations like data fetching and automatically handle promise resolution. Made with HARPA AI

[@Shifter21000]

This is a great help, Jack. How does Jotai and state management work together with SSR in NextJS. There are few hooks for this need, some go with providers, but is there an established pattern here.

[@jherr]

If you have global atoms it's pretty easy. I haven't checked with Jotai's contextual stuff, probably still works. Basically any state manager that has external (non-hook) access is going to work with RSCs.

[@awekeningbro1207]

14:48 I think there a memory leak issue in the get function because everytime salary or bonus changes, it will keep stacking new subscriber function, I think we need to call unsubscribe function inside the subscribe callback in order to fix that

[@aliarslanansari]

In a follow up video, can you write test for this code using JEST or any of your preferred testing library?

[@ayushjain7023]

Hey Jack, do we need to have atom dependency inside useEffect?

[@streamoverlayprocodes6890]

the code explorer to be on the right feels a bit unnatural because our romantic language disposition is to look from left to right, and when I look for files, my brain maps everything from the left. But everything is about user preferences 😀, I won't mandate you to eat soup with a fork :)

[@rodneydin]

Would it be great if you had a discord server 🎉

[@jherr]

Turns out, I do: discord.gg/sae4SWPAFN

[@michaelscofield2469]

Please make a video about how to setup react, typescript, eslint, prettier

[@claus4tw]

Npx create-t3-app

[@pollettoimpanato]

18:35 my honest reaction every time “unexpected { at line 189” disappears after a random reload (there are only 10 lines of code)

[@thomashermant9321]

Hi ! First of all you do a great job on your content ! I try you code in my NextJs application. Everything working fine until I use an atom with a getter function. My Set reached is maximum capacity. When I put a log between line 23 and 24 in jotai.ts After some inputs manipulation I got thousand even million logs. Any idea to improve it ?

[@Seedzification]

yea it's probably missing a useref or a usecallback somewhere?

[@adityapanday007]

Which extension used for auto suggestions?

[@jherr]

GitHub Copilot

[@codingleo]

First here woooooohoooo

[@andrewc8125]

I think it is time to migrate from Recoil to Jotai

[@Maybehassanawad]

Can you please rebuild Valtio🤩

[@jherr]

At it's most basic I can (and will) do that as a short.

[@frontend_ko]

Zustand is the next, sir?

[@adamjamiu6764]

Hi Jack 😊. What is the name of your code editor font family

[@jherr]

JETBrains Mono

[@Poohbify]

:[[ Eventually I will understand this.

[@VKD007]

I thought you will use signals and jotai

[@jherr]

I made this video before the "great signal boom of early 2023" :) But I wouldn't have added them anyway, since I really don't think ref-patching React is a good idea.

[@VKD007]

I really liked jotai though, ive seen your video. Jotai for async state and signals for granular updates.

[@kerodfresenbetgebremedhin1881]

Sir, you are the best fit for intermediate to high skill programming content. I have no right to impose upon you content restrictions, but in my opinion you and obviously content consumers like me would be best served in this niche.

[@jherr]

Don't worry, I'll always be producing some medium to advanced content on a regular basis.

[@DjLeonSKennedy]

You need to create payable courses, your explanation is perfect!

[@_RobTheRed_]

Next for UI/UX with rebuild/refresh of react drag n drop? 🫣