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.
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.
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
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
@@rebeccakeller4666 I just checked documentation, I think you are supposed to slect part of atom using focusAtom function. Or selectAtom for read only data.
@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.
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 } ```
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 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
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.
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
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.
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.
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.
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.
@@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.
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 :)
🎯 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
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
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.
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 ?
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.
This type of content is exactly what we need. We don't need more beginner stuff, this is where you learn
💯 !
For a Junior/Mid-level developer, this Content is GOLD. This is the type of content someone like me needs to level up.
I have 10 years experience of web development and I still find this type of content GOLD 😂
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.
Will appreciate more build from scratch videos.
This is EXACTLY the content we NEED! No more noobie stuff, but dive into deeper topics like this. LOVE IT!
Hands down best channel on youtube right now in the React space. We thank you!
We need more of this. Now, I'll probably have to come back to this video untill I grasp all the concept. Thank you
Your content keeps getting better, Jack! Fascinating, and I especially like how you explain the reasoning about the types. 😊
Need more videos like this talking about internal function of the system is literally watching a crime thriller movie
You’ve easily become my favorite creator here!
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.
I’ve learned most of the advanced things in react from you. Thank you so much!
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
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
Zustand is more centralized store while Jotai is small store (like react context) so it's depends on your need
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
@@rebeccakeller4666 I just checked documentation, I think you are supposed to slect part of atom using focusAtom function. Or selectAtom for read only data.
@@tawalioualao7444 I use zustand with many decentralized stores using useState. I have also few global stores, but most are scoped in components.
@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.
I liked it. I gotta watch it more times to get it right. Keep 'em coming.
Ooof that was some fab content Jack. Learned so much. Thanks a ton!
Nice Video about jotai core. I would like to see to daishi kato and Jack Herrington talking about jotai in the future.
What a great video! I look forward to seeing more advanced stuff like this on your channel.
Another amazing tutorial. This one might take 2 rewatches and reimplementing it myself before it really clicks in - can't wait!
That was amazing! I've never seen content like this, thanks!
This is tricky and exciting at the same time! Thank you very much
jotai will be fun, will solves some promise headaches on a project
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.
Would love to see jotai's onMount as well as jotai-effect
that was so cool! I didn't imagine that it was so simple, like a svelte stoore
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
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
}
```
You and your contents are really amazigng. Thanks for all of them!
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.
Good point. Could you provide an example of this?
@@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
What such quality content! Glad to be subscribed to this channel :)
My man, you got the like, subscribe, AND I rang the bell. This was amazing.
Thanks for your work. Another very valuable video.
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.
100 percent mind blown
GOLD GOLD GOLD content
Excellent stuff Jack, please keep going!
I loved the video. Keep making this content. This is pure gold
just amazing !!!
Impressive as always, currently i'm using custom reducers for my apps and the setup is quite the same.
I've been loving Jotai thanks Jack
Amazing content!❤️
Enjoyed your video, thank you.💯
Very impressive
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
you're a GOD among men
It would be super cool if you could do the same kind of video for creating a system like `react-hook-form`.
This is amazing!
great content 😀
pretty awesome 🔥 Amazing work
Great stuff as always
wonderful content :D
aha! I see you doing semantic names for type definitions on generics! someone is watching Matt Pocock
Awesome.
Great content, Jack!
This was tough and fun
awesome content
One little hair change and my man looking like the mayor of Pleasantville
Good channel to learn advanced topics 🎉
Thanks Jack, captivating as always!
Awesome, could you please make a video on two way binding
love you bro
File tree on the right is the way
A scientist keeps experimenting with react 😃
Awesome
Pure gold!
explorer on the right is superior
Challenge accepted 🔥🔥
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.
Don't worry, I'll always be producing some medium to advanced content on a regular basis.
cool stuff
amazing video, thank you !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
This is really really cooool!
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.
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.
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.
That seems awfully specific. Is that what you are working on currently?
Yeah and CZcams has nothing like that most tuts only scratch the surface of zustand which makes it hard to use this un-opinionated library.
It's specific but it is needed for every project whether it is e-commerce, freelancing site, social media, etc...
@@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.
That's exactly what I am trying to achieve, that solution was definitely inspired by your videos.
That was great and really easy to follow. Is that copilot doing all the magical autocompletion?
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. :)
@@jherr I did think it was even cleverer than I expected!
18:35 my honest reaction every time “unexpected { at line 189” disappears after a random reload (there are only 10 lines of code)
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 :)
This should go to Jotai official docs🤣
🎯 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
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
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.
@@jherr Thank you so much 🙏
I love this!!!
Would it be great if you had a discord server 🎉
Turns out, I do: discord.gg/sae4SWPAFN
Please make a video about how to setup react, typescript, eslint, prettier
Npx create-t3-app
In a follow up video, can you write test for this code using JEST or any of your preferred testing library?
This is amazing content. and to get this for free. thanks Jack!
Zustand is the next, sir?
Which extension used for auto suggestions?
GitHub Copilot
Hey Jack, do we need to have atom dependency inside useEffect?
Can you please rebuild Valtio🤩
At it's most basic I can (and will) do that as a short.
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 ?
yea it's probably missing a useref or a usecallback somewhere?
I think it is time to migrate from Recoil to Jotai
Hi Jack 😊. What is the name of your code editor font family
JETBrains Mono
First here woooooohoooo
I thought you will use signals and jotai
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.
I really liked jotai though, ive seen your video. Jotai for async state and signals for granular updates.
:[[
Eventually I will understand this.
You need to create payable courses, your explanation is perfect!
Next for UI/UX with rebuild/refresh of react drag n drop? 🫣
Amazing!