Hey everyone! 👋 Thanks so much to everyone for watching my videos. It means a lot. ❤️ Because of the number of questions I've received about Recoil, I've decided to create a free, comprehensive Recoil course, where you can learn how to use Recoil like a pro. Check it out here: learnrecoil.com/ See you there. 🙌
Great! I'll give Recoil a try! Just a suggestion at 7:14, when logging something if you wrap it in curly braces, it'll log it with a label coz u log an object console.log({ something })
Hey, folks. Thanks for watching. I hope it was helpful. I'm planning on doing more videos about Recoil real soon, so be sure to subscribe! There is a lot more to Recoil that I haven't yet unpacked, such as React Suspense integration, Async data fetching and data sync, DevTools, and a bunch of other interesting stuff.
But what if we need to get all the elements data in one place ? (eg: a global save button and on clicking that we need to send all the elements data to db)
Hi, all! Check out my latest video in the series, where I cover data fetching with Recoil and React Suspense: ua-cam.com/video/Hkd9gMYuYu4/v-deo.html 📡🌍
Thanks! I am planning to do a video soon about Atom Effects, which is a new experimental Recoil API, mainly used for syncing data with a server. Stay tuned.
Hey Carlos. Check out this atom in the latest iteration of my code: github.com/jacques-blom/recoil-design-tool/blob/c44ae0352b3178ca45210aaad61cbded5afb1f24/src/Element/elementState.tsx#L60 It's an array of IDs, so that multiple items can be selected and dragged at the same time. Here is a Tweet showing the added multi-select capability: twitter.com/jacques_codes/status/1302238344517214212 Hope this helps!
Is there a best practlce for defining the key for an atom or atom family? why don't we use a GUID or some other sort of non-clashing strings? What if we're developing a component library and my atom key clashes with one of the application atoms?
The reason you have to explicitly provide a key is because Recoil data should be serialisable. And if you don't explicitly provide a key then Recoil won't know which atoms and atom families to rehydrate state back to. This is an intentional design decision by the Recoil team. The downside is that you have to provide keys, but the upside is serialization. For something like a component library, I'd add a prefix to all your keys. (e.g. "myLibraryName-atomName") Hope that helps!
Hey, nice quick explanation. Is there a simple way to get all the items for an atomFamily? I want to calculate the intersections of a drag-selection box.
Hey Mikk. Yeah you can do it by building a selector that... 1. First fetches a list of all IDs for the items you want to fetch. 2. Then fetches all the atom family values by iterating over the ids. Here's a quick example I've put together: codesandbox.io/s/selection-bounding-box-eiyic Hope this helps!
@@JacquesBlom Got it working! A bit of a different implementation (drag box to select nodes). But thanks regardless, it helped! node-editor-kv7e0rr6x-mikkmartin.vercel.app/
I'll be covering this in my upcoming free Recoil course, which you can sign up for here: learnrecoil.com. 🙂
4 роки тому
I've been using recoil for my last project, it's great and I can move data between components much faster and with les debugging. I only have two problems, first, React Dev Tools are not working very well, Performance recording is not working when using recoil and show updated components is not working either. And to debugging the current recoil state with Redux Dev Tools is not compatible, so I'm using Recoilize, it's great when it works, but only when it works.
Really nice demo. I can see how hard you worked and how good of a developer you are. The one thing I'm not a fan of is how you edited this. It's very choppy and you're in one place in the code and then another and it's hard to follow along a lot of the time. I'd recommend if you are going to cut time that you don't do it when moving around in the code. But I'm in awe of your skills otherwise.
Hey Kai. I'll likely always use TypeScript in my examples. The syntax is the same as ES6/ESNEXT, but with some type annotations. For demo code, I skip the complex bits of TS where I can, to try to make it easy for non-TS coders to understand, too.
@@JacquesBlom I'm telling this because I'm not subscribed to your channel (I don't know who you are), I just follow the suggestions from youtube! Mentioning that a video is about typescript code will help youtube algorithms do not include that kind of suggestion for me (I'm always deleting videos from the youtube history if I'm not interested in getting suggestions about similar videos)! Thanks in advance!
Woow. Did I see right thing? 10:47 I knew about atomic concept of recoil. But not tried yet. How this possible, ui of Properties in right sidebar changes. But react does not render them. Is react devtool doing something differently. I didn't see green/yellow borders. Pls. I also some questions. What's is actual size of recoil? Bundlefobia shows 60+kb. Maybe it is wrong. Is it safe to use Recoil production? Is it in beta yet? Sorry. I forgot to thank you. Keep doing amazing tutorials. You are good at it.
For sure! Millions of apps out there still use Redux. It's a great state management solution with a big, mature ecosystem around it. It does have a few drawbacks though, that are making some people move away from it: 1. The first is, of course, the large amount of boilerplate involved. 2. The second, less obvious issue is that, whenever you dispatch an action, all reducers and selectors have to re-run. This doesn't mean all your components have to re-render, but the amount of computation per action increases with the number of reducers and components. So in some situations, that could cause scalability issues. Redux is still here to stay for now. But I think it's worth looking at other models for React state management.
@@JacquesBlom That's right, I have a big application with that problem for the many about all redux files (reducers, selector, action, ...), and it is a repeating all
Hey everyone! 👋 Thanks so much to everyone for watching my videos. It means a lot. ❤️
Because of the number of questions I've received about Recoil, I've decided to create a free, comprehensive Recoil course, where you can learn how to use Recoil like a pro.
Check it out here: learnrecoil.com/
See you there. 🙌
This was the one I was searching for a long...thanks to youtube recommendations
Amazing work, I really like the way you explain the concepts, your code is really well written and cheers for adding the resources
Thanks a lot!
Great! I'll give Recoil a try!
Just a suggestion at 7:14, when logging something if you wrap it in curly braces, it'll log it with a label coz u log an object
console.log({ something })
Hey, folks. Thanks for watching. I hope it was helpful.
I'm planning on doing more videos about Recoil real soon, so be sure to subscribe!
There is a lot more to Recoil that I haven't yet unpacked, such as React Suspense integration, Async data fetching and data sync, DevTools, and a bunch of other interesting stuff.
Great explanation , one of the best video on recoil. Make sure to do more videos on recoil.
Nice video, it really makes the case for using recoil! Great Job!
Thank you!
1:15 if we wrap the element component by memo() wouldn't this problem be fixed?
But what if we need to get all the elements data in one place ? (eg: a global save button and on clicking that we need to send all the elements data to db)
Neatly explained. Understood one of the use case for recoil.
Thanks!
I am late on this but it's really helpful for me to understand Recoil. thanks a lot to you
Hi, all!
Check out my latest video in the series, where I cover data fetching with Recoil and React Suspense:
ua-cam.com/video/Hkd9gMYuYu4/v-deo.html 📡🌍
Why do we save id in selectedElementIdState? Can we save the full item? We will not need an additional selector by id for element.
Which theme is this ?
Why is a context used for elements state instead of an atom like in your todo app example?
Nice tutorial. Would love to know more about recoil.
Thanks! I am planning to do a video soon about Atom Effects, which is a new experimental Recoil API, mainly used for syncing data with a server. Stay tuned.
Hey Tiago. I'm going to be covering a bunch more in my free Recoil course I'm working on, which you can sign up for here: learnrecoil.com.
this is biblical. thank you so much. now I can start my new project with recoil!
you need way more subscribers
Hi, thanks for the video! I want to have a different border for the selected element. Is there a performant way to know if an element is selected?
Hey Carlos. Check out this atom in the latest iteration of my code: github.com/jacques-blom/recoil-design-tool/blob/c44ae0352b3178ca45210aaad61cbded5afb1f24/src/Element/elementState.tsx#L60
It's an array of IDs, so that multiple items can be selected and dragged at the same time. Here is a Tweet showing the added multi-select capability: twitter.com/jacques_codes/status/1302238344517214212
Hope this helps!
Is there a best practlce for defining the key for an atom or atom family? why don't we use a GUID or some other sort of non-clashing strings?
What if we're developing a component library and my atom key clashes with one of the application atoms?
The reason you have to explicitly provide a key is because Recoil data should be serialisable. And if you don't explicitly provide a key then Recoil won't know which atoms and atom families to rehydrate state back to.
This is an intentional design decision by the Recoil team. The downside is that you have to provide keys, but the upside is serialization.
For something like a component library, I'd add a prefix to all your keys. (e.g. "myLibraryName-atomName")
Hope that helps!
Hey, nice quick explanation. Is there a simple way to get all the items for an atomFamily? I want to calculate the intersections of a drag-selection box.
Hey Mikk. Yeah you can do it by building a selector that...
1. First fetches a list of all IDs for the items you want to fetch.
2. Then fetches all the atom family values by iterating over the ids.
Here's a quick example I've put together: codesandbox.io/s/selection-bounding-box-eiyic
Hope this helps!
@@JacquesBlom Got it working! A bit of a different implementation (drag box to select nodes). But thanks regardless, it helped!
node-editor-kv7e0rr6x-mikkmartin.vercel.app/
@@MikkMartin Awesome :)
Can you make a comparison to zustand? Nice content..subscribed
Subscribed! Good content.. Recoil✌
Thanks! If you're interested in some more Recoil content, I'm working on a free Recoil course, which you can sign up for here: learnrecoil.com.
Now what's left are middlewares and tools just like in redux and everything will be good. i'll be using this though starting today thanks!
I'll be covering this in my upcoming free Recoil course, which you can sign up for here: learnrecoil.com. 🙂
Thanks man. can you explain some gotchas and tradeoff using Recoil.js and would you recommend to switch my production app to Recoil.js
I'll be covering this in my upcoming free Recoil course, which you can sign up for here: learnrecoil.com. 🙂
I've been using recoil for my last project, it's great and I can move data between components much faster and with les debugging. I only have two problems, first, React Dev Tools are not working very well, Performance recording is not working when using recoil and show updated components is not working either. And to debugging the current recoil state with Redux Dev Tools is not compatible, so I'm using Recoilize, it's great when it works, but only when it works.
Yeah Recoil is still a very young library, so it's going to take some time for the ecosystem around it to evolve.
Really nice demo. I can see how hard you worked and how good of a developer you are. The one thing I'm not a fan of is how you edited this. It's very choppy and you're in one place in the code and then another and it's hard to follow along a lot of the time. I'd recommend if you are going to cut time that you don't do it when moving around in the code. But I'm in awe of your skills otherwise.
Please mention every time if your video is going to be about react+typescript, so I can skip it! I'm looking for react+(es6+) videos!
Hey Kai. I'll likely always use TypeScript in my examples. The syntax is the same as ES6/ESNEXT, but with some type annotations. For demo code, I skip the complex bits of TS where I can, to try to make it easy for non-TS coders to understand, too.
@@JacquesBlom I'm telling this because I'm not subscribed to your channel (I don't know who you are), I just follow the suggestions from youtube! Mentioning that a video is about typescript code will help youtube algorithms do not include that kind of suggestion for me (I'm always deleting videos from the youtube history if I'm not interested in getting suggestions about similar videos)! Thanks in advance!
Woow. Did I see right thing? 10:47
I knew about atomic concept of recoil. But not tried yet.
How this possible, ui of Properties in right sidebar changes. But react does not render them. Is react devtool doing something differently. I didn't see green/yellow borders.
Pls. I also some questions.
What's is actual size of recoil? Bundlefobia shows 60+kb. Maybe it is wrong.
Is it safe to use Recoil production?
Is it in beta yet?
Sorry. I forgot to thank you. Keep doing amazing tutorials. You are good at it.
You are the best!
Thanks, Marco! If you want to learn more, I'm working on a free Recoil course, which you can sign up for here: learnrecoil.com.
Or just use Redux
For sure! Millions of apps out there still use Redux. It's a great state management solution with a big, mature ecosystem around it.
It does have a few drawbacks though, that are making some people move away from it:
1. The first is, of course, the large amount of boilerplate involved.
2. The second, less obvious issue is that, whenever you dispatch an action, all reducers and selectors have to re-run. This doesn't mean all your components have to re-render, but the amount of computation per action increases with the number of reducers and components. So in some situations, that could cause scalability issues.
Redux is still here to stay for now. But I think it's worth looking at other models for React state management.
@@JacquesBlom That's right, I have a big application with that problem for the many about all redux files (reducers, selector, action, ...), and it is a repeating all