Rebuilding Jotai State Manager for React in 20 Minutes!

[@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 😂

[@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.

[@dprophecyguy]

Will appreciate more build from scratch videos.

[@joshreynolds4164]

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

[@Bread-vk8fl]

Correction: JOUTAI in japanese means "state". I just saw jotai for the first time yesterday and you post this video now. Perfect timing. Valeu mano!!

[@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.

[@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

[@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

[@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!

[@karolwons8566]

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

[@andrerego2611]

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

[@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

[@JGBSolutions]

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

[@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

[@rameshramesh-bd2wu]

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

[@Fedjz]

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

[@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

[@vasilicampuica6428]

Great content, Jack!

[@umitdemir3741]

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

[@Echoes2165]

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

[@petrhavlik]

Excellent stuff Jack, please keep going!

[@kasvith]

Great stuff as always

[@vonderklaas]

Thanks Jack, captivating as always!

[@qodesmith520]

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

[@Dgiulian]

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

[@lautarodapin]

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

[@MsPrakhar12]

pretty awesome 🔥 Amazing work

[@Dev-Coder]

Amazing content!❤️

[@erikslorenz]

I've been loving Jotai thanks Jack

[@elmalleable]

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

[@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.

[@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.

[@bartek...]

Thanks for your work. Another very valuable video.

[@eliasimokhai]

This was tough and fun

[@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

[@vcothur7]

This is amazing!

[@jamshediqbal7936]

Good channel to learn advanced topics 🎉

[@吴小红-k2v]

Enjoyed your video, thank you.💯

[@ivanglpz]

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

[@thiagomoraes791]

great content 😀

[@realbigsquid]

100 percent mind blown

[@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 } ```

[@MarstanMobilOyunlar]

wonderful content :D

[@feitan8745]

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

[@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!

[@andrepadez]

you're a GOD among men

[@shivamjhaa]

This is really really cooool!

[@gencomer]

Very impressive

[@samsurya283]

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

[@מקוההמכלול]

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

[@frontend_ko]

Zustand is the next, sir?

[@luizpaulonascimento9162]

awesome content

[@bosung90]

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

[@deamorta6117]

GOLD GOLD GOLD content

[@lilpodbebe]

Pure gold!

[@daxdivv]

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

[@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.

[@jeresalem]

Awesome.

[@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 🙏

[@ToreyLittlefield]

Challenge accepted 🔥🔥

[@mdjaman7348]

love you bro

[@CrazyWolf132]

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

[@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.

[@aliarslanansari]

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

[@MohamedElmardi123]

Amazing!

[@parassharma7041]

A scientist keeps experimenting with react 😃

[@saiyanrivals]

Awesome

[@streamoverlayprocodes6890]

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

[@jasondavis87]

I love this!!!

[@adityapanday007]

Which extension used for auto suggestions?

[@jherr]

GitHub Copilot

[@download333]

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

[@abdushakoor0099]

mindblown

[@fricze]

cool stuff

[@ayushjain7023]

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

[@FeoYang]

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

[@GachiTscho]

This should go to Jotai official docs🤣

[@thecodecatalyst]

File tree on the right is the way

[@greatauntmuriel]

explorer on the right is superior

[@adamjamiu6764]

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

[@jherr]

JETBrains Mono

[@WajuAbolarin]

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

[@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 :)

[@michaelscofield2469]

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

[@claus4tw]

Npx create-t3-app

[@rodneydin]

Would it be great if you had a discord server 🎉

[@jherr]

Turns out, I do: discord.gg/sae4SWPAFN

[@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?

[@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.

[@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.

[@ak-loz]

:[[ Eventually I will understand this.

[@codingleo]

First here woooooohoooo

[@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? 🫣

[@dhaw]

just amazing !!!