I'm not sure. I really like the middleware approach in redux and extensions like sagas. Though they imho messed up the naming (especially for actions) and the overall presentation of the library. I think of redux more of a event sourcing library than simple state management.
*"..even change the background color....to lets see......white colourrrr....."* hahha Fantastic tutorial btw. I can't wait to see what this becomes. Thank you!
omg, I didn't know I could fall in love with a framework presentation. I've just been starting to learn redux for the last week or so on a side project that's actually similar to what was presented here (lots of divs, connected with SVGs, that can be dynamically moved and stuff), and things started to look messy. but now I can't wait to start using this!
I like the tone implying creating more and more absurd libraries to "do anything" is "normal" in some way, as if the backend guys just immediately caved to every whim of their PMs instead of pushing back, calmly discussing tradeoffs, and coming to a mutual compromise. This library for example is ridiculous - you're supposed to be avoiding mutable state like the plague, bending over backwards to prefer constants, then cached values, then mutable state only as a last resort, not building more and more libraries to make it easier and easier to use it.
@@gsofficial I think we argue that mutable state is redux is bad because you can't identify the changes observably via mutation. This library doesn't have that issue, but I would like to see how it handles that situation of wanting to essentially subscribe to state changes. In fact at the very end, he suggests you can reduce over it and use the flux pattern.
@@user-sw1wq8lh2w I was a backend guy for the first 6 years of my career at Google... trust me, it has nothing to do with whether it's on a browser or not.
@@gsofficial correct me if I'm wrong, but Recoil state is immutable, same as React state. And this specific framework solves a problem that Redux fails at - rerendering only parts of the app that were affected by the change. As for mutable state, I thought the same until I checked Mobx.
@@pumbo_nv not to sound glib, but one good way to avoid that problem is to abandon frameworks that "do the re-rendering for you" and handle it yourself. Then, when things get too complex, you know your app is too big, and that you have pushed the language too far.
Thanks for sharing! I grew used to the simplicity and flexibility of Angular's dependency-injected services with RxJS, but if you need to build in React this seems to help correct the frustrating quilt-work of redux/useContext/useState/localstorage/etc/etc that can quickly become a hairy mess of shared state management and creation of derivatives. Thanks for making React data management easier to work with and your awesome presentation & drawings to make it clear!
Is there any chance that you'll release the demo app from this presentation? As you said, Recoil is not very effective in a toy setting. Thanks for releasing Recoil this early!
Agreed - the benefits of Recoil aren't that obvious with a basic app. I'm working on a tutorial video where I build something similar to David's example app. I'll post here when the video and repo are ready. 🙌
Wow I love this library already, I have fall into similar scenarios before where I just had to use whatever it was available within React's core library, and things weren't rendering or performing as smooth as I wanted to be, it was just super sluggish and we couldn't really do much... now this library could easily fix those problem we faced before and we could certainly go back to those projects and fix those quite easily! Thank God for bringing you guys on board to help solving quite complex uncovered scenarios from the React core team, not that they haven't been already, but this is literally the next level of state management where not everybody would come across every day! Anyways I just wanted to say a massive thank you to you and your team behind this great library.
I am building a React application and I have never use Redux because of my phobia of complex code or any other state management. But I was able to use Recoil, and I absolutely love it!
really great presentation. This looks like the way to go imo. I like the api a lot and loved the comment about state management ceremony, I've always felt this way with redux...
I agree, this is pretty wild stuff. Like, the amount of boilerplate and bloat you have to create with redux, especially in larger apps, seems like quite a lot compared to the simplicity required to hook recoil in
Good explanation and example! It looks amazing. We need something more simple and powerful then Redux. Keep working on this and I hope we will see a production ready release soon. Good luck!
Hard to believe I'm prepared to learn yet another state management lib. But Recoil seems clear and minimalist without skipping important things like performance.
God I thought it was just me thinking that the current state management tools in react ecosystem are annoying as hell in some scenarios. This looks very elegant and natural, great presentation too. Kudos.
I wonder why would you want to force constraint in the selector? this may result inconsistency between what's saved in the atom and what selected from the selector, may be hard to debug.
How lucky am I :D This is exaclty what I need. I stripped away all the props and all the throttling I disliked. Now everything is blazing fast and easy to maintain.
At 17:42, Dave McCabe suggests that no changes are required after changing his function itemWithID(id) so that it returns a selector instead of an atom, but unless I'm wrong setItemState can't be used on a selector... Did I miss something? Edit : After having a look at the docs, this is indeed true if the "set" property is also set in the selector which basically makes it act as a proxy.
This is pretty cool. I have been using RxJS with React to solve these types of issues, but the API shown in the examples looked pretty good. Will definitely experiment with this.
It seems that a major feature is that it doesn't need the entire tree to re-render when a high-up context changes, but I thought the Context API uses subscriptions and already only updates subscribers?
Maybe is because Redux is the default standard to do React apps. And if a "mobX" clone comes directly from the Facebook team it will make a great addition to the community.
Selector is a PURE function that can be async in case it needs to calculate based on DATA FROM SERVER. It's either selector semantically imposes restriction on server data prohibiting it to ever change or selector shouldn't be recklessly called a pure thing.
I feel this can help me write performant forms in React since the Context API has limitations - you cant subscribe to a piece of data and adding context dynamically is not something you can achieve per field, hence rendering all fields on every keystroke was looking at using Proxy but got complicated with nested form values. It feels like subscribing to a slice to data in context, something React is not providing natively, those kinds of use cases where performance is laggy, this library can help.
Can you give a simple example, because you can only see some analysis from the video, but you can't see a coherent process, and some steps are still incomprehensible. If there is a complete demo, it will be easier to understand.
easy to use, but the problem here is how to structure the file & state according to the business app? This is my concern. Personally, I think that redux is doing very well :3 so I hopefully will have some example or pattern about that soon :) so excited
A question about the demo at 11:36: The highlighted areas in your slide (those with a yellow outline) indicate the components that are being re-rendered by React, not DOM updates, (although in this case they will be the same). My understanding is that the entire tree of components can re-render, but only those parts of the DOM that have actually changed will be changed in the DOM. So the optimisation here is reducing the number of render() methods that have to be called. The number of required DOM updates would have been exactly the same had you used Redux instead, even if every component had to be re-rendered every time. Have I understood this correctly?
React already had beautiful hooks for state controlling, necessary only sharing mechanism. #ReactEurope can you make API the same as the "use-between" hook? To reuse exists React hooks for state control, and don't produce new hooks. What do you think?
I feel like Recoil is much more flexible though especially for interdependent state. Sure, you can achieve shared state with rxjs subjects but it isn't quite that flexible.
cool implementation, its a unique twist on redux + effects + selectors, probably solves for a ton of the headaches. As you need to implement a single source of truth you'd likely end up back at some form of redux state.
I wish everyone can present their ideas like him
its step by step, no missing step, and pressume audience dont know stuffs
one day, i will do the same hopefully
I can watch this again and again.
He is actually explaining React very well as part of explaining Recoil.
"Do you see this as replacing Redux?" - "yes" (immediately).
I'm not sure. I really like the middleware approach in redux and extensions like sagas. Though they imho messed up the naming (especially for actions) and the overall presentation of the library. I think of redux more of a event sourcing library than simple state management.
I have never seen someone explaining something so good....
This library looks incredibly awesome!
I'm looking forward to trying it out.
+1 for any state MGMT tool that doesn't require me to make reducers. :)
Have you tried Mobx?
or even react-wisteria?
Or Apollo client?
+1 too!
or reduxjs/toolkit?
Mate, that's amazing! Well done and thanks for sharing with the world.
Recoil looks amazing. With local state it covers almost all needs.
His presentation skills are exceptional🙌
*"..even change the background color....to lets see......white colourrrr....."* hahha
Fantastic tutorial btw. I can't wait to see what this becomes. Thank you!
OMG. This is incredible! I absolutely love it (having dealt with precisely this kind of problems before). Thank you.
omg, I didn't know I could fall in love with a framework presentation.
I've just been starting to learn redux for the last week or so on a side project that's actually similar to what was presented here (lots of divs, connected with SVGs, that can be dynamically moved and stuff), and things started to look messy. but now I can't wait to start using this!
I like how whole tone of this presentation as if Redux didn't even exist
I like the tone implying creating more and more absurd libraries to "do anything" is "normal" in some way, as if the backend guys just immediately caved to every whim of their PMs instead of pushing back, calmly discussing tradeoffs, and coming to a mutual compromise. This library for example is ridiculous - you're supposed to be avoiding mutable state like the plague, bending over backwards to prefer constants, then cached values, then mutable state only as a last resort, not building more and more libraries to make it easier and easier to use it.
@@gsofficial I think we argue that mutable state is redux is bad because you can't identify the changes observably via mutation. This library doesn't have that issue, but I would like to see how it handles that situation of wanting to essentially subscribe to state changes.
In fact at the very end, he suggests you can reduce over it and use the flux pattern.
@@user-sw1wq8lh2w I was a backend guy for the first 6 years of my career at Google... trust me, it has nothing to do with whether it's on a browser or not.
@@gsofficial correct me if I'm wrong, but Recoil state is immutable, same as React state. And this specific framework solves a problem that Redux fails at - rerendering only parts of the app that were affected by the change.
As for mutable state, I thought the same until I checked Mobx.
@@pumbo_nv not to sound glib, but one good way to avoid that problem is to abandon frameworks that "do the re-rendering for you" and handle it yourself. Then, when things get too complex, you know your app is too big, and that you have pushed the language too far.
"We're going to enter the third dimension" is the nicest way I heard someone describe global variables.
Thanks for sharing! I grew used to the simplicity and flexibility of Angular's dependency-injected services with RxJS, but if you need to build in React this seems to help correct the frustrating quilt-work of redux/useContext/useState/localstorage/etc/etc that can quickly become a hairy mess of shared state management and creation of derivatives. Thanks for making React data management easier to work with and your awesome presentation & drawings to make it clear!
Is there any chance that you'll release the demo app from this presentation? As you said, Recoil is not very effective in a toy setting. Thanks for releasing Recoil this early!
absolutely. We need the demo app.
I would like this too!
I need it too
I'd like to see it too
Agreed - the benefits of Recoil aren't that obvious with a basic app. I'm working on a tutorial video where I build something similar to David's example app. I'll post here when the video and repo are ready. 🙌
Wow I love this library already, I have fall into similar scenarios before where I just had to use whatever it was available within React's core library, and things weren't rendering or performing as smooth as I wanted to be, it was just super sluggish and we couldn't really do much... now this library could easily fix those problem we faced before and we could certainly go back to those projects and fix those quite easily!
Thank God for bringing you guys on board to help solving quite complex uncovered scenarios from the React core team, not that they haven't been already, but this is literally the next level of state management where not everybody would come across every day!
Anyways I just wanted to say a massive thank you to you and your team behind this great library.
I am building a React application and I have never use Redux because of my phobia of complex code or any other state management. But I was able to use Recoil, and I absolutely love it!
Yeah, nothing like writing 800 lines of Typescript before being able to actually use the store...
really great presentation. This looks like the way to go imo. I like the api a lot and loved the comment about state management ceremony, I've always felt this way with redux...
I agree, this is pretty wild stuff. Like, the amount of boilerplate and bloat you have to create with redux, especially in larger apps, seems like quite a lot compared to the simplicity required to hook recoil in
This is beyond awesome. It'll be as beneficial as hooks
I love this demo, I learned so much about though process and limitations of different React features. thanks
The presenter is very good at presenting and explaining the subject matter.
This was extremely impressive, this is much much more easy to reason vs redux, Recoil feels like JSX where Redux is HTML
This guy is great at explaining, so much information protrayed in 30 minutes
Lots to learn. Thankyou Dave!
The 3D idea to represent state is genius. Kudos!
Been using for a couple weeks. Crazy simple. Thank you Recoil.
Solved the same problem with rxjs, but this does look a bit nicer. One thing that could be of concern is exposing all of the atoms in a global scope.
16 minutes in and my mind is officially blown.
Good explanation and example! It looks amazing. We need something more simple and powerful then Redux. Keep working on this and I hope we will see a production ready release soon. Good luck!
You are the best teacher. Your presentation, your analogy, your explanation is synced with atom
wow simply amazing how easily he explains it !!
Hard to believe I'm prepared to learn yet another state management lib. But Recoil seems clear and minimalist without skipping important things like performance.
God I thought it was just me thinking that the current state management tools in react ecosystem are annoying as hell in some scenarios. This looks very elegant and natural, great presentation too. Kudos.
I wonder why would you want to force constraint in the selector? this may result inconsistency between what's saved in the atom and what selected from the selector, may be hard to debug.
Terrific presentation, thank you
How lucky am I :D This is exaclty what I need. I stripped away all the props and all the throttling I disliked. Now everything is blazing fast and easy to maintain.
I have learned so much of the basics, by watching this video! Recoil looks great, and you're a great teacher. Thanks for making this video
Great idea and excellent presentation. Thank you for that.
I really appreciate it, thanks a lot.
This is similar to Hookstate except it doesn't look like it handles nested state very well. But I do like that you can dynamically add state/atoms.
here from Ben Awad 😆
+1
At 17:42, Dave McCabe suggests that no changes are required after changing his function itemWithID(id) so that it returns a selector instead of an atom, but unless I'm wrong setItemState can't be used on a selector... Did I miss something?
Edit : After having a look at the docs, this is indeed true if the "set" property is also set in the selector which basically makes it act as a proxy.
This is pretty cool. I have been using RxJS with React to solve these types of issues, but the API shown in the examples looked pretty good. Will definitely experiment with this.
Looks very promising! Definitely seems less complicated and easier to use than Redux.
How about using atom values outside of react world ? For example in a helper function not tied to a component
What a great talk! A few of the things seemed almost too good to be true (setting state on a selector), but looking at the docs it checks out :D
He works for Pied Piper, right? 😁
Great explanation. Thank you
Dave, you are AWESOME!
Thanks!
Incredible video, what did you use to make the drawings in the presentation ? It looks awesome and I would be happy to use it in the future :)
vue3 composition api for React, yay!
nice to see the tools converging in concepts
Does anyone know if this demo code has been open-sourced yet? It'll be great to be able to experiment over this app. Thanks
I looked at the dom tree of my react code , and noticed that Recoil uses Context Providers as the underlying code.
Thank you, wizards 🧙♂
How many projects inside facebook use this technology currently? (May 2022)
driving me nuts that the debugger isn't showing width or height -.-
Absolutely fantastic. Will be using it asap!
This is so much better than redux!!!!!
It seems that a major feature is that it doesn't need the entire tree to re-render when a high-up context changes, but I thought the Context API uses subscriptions and already only updates subscribers?
Will the demo code be available?
Can you provide the repo for this demo? Amazing presentation, awesome tool.
Nice clean API for solving a hard problem 👏🏻👏🏻👏🏻
What is the status of this project?
Wow, just wow
Aren't these issues already solved with MobX? Why comparing with Redux. Should have mentioned MobX atleast once here.
Maybe is because Redux is the default standard to do React apps. And if a "mobX" clone comes directly from the Facebook team it will make a great addition to the community.
He talks about MobX at the end
I want to see performance comparisons. Last I checked MobX didn't have the speed of Redux. Maybe this could have the speed and the ease of use.
You what? MobX is light-years away more performant than Redux. Everything is memorized and optimized for you out of the box
React comes with useAtom next year
link
Why not just use MobX?
It is very good i use it for everything, even small things.
Great presentation Dave. Thanks.
Very interesting concepts! Nice Work! Very inspiring as well.
why is still in an experimental ?
Selector is a PURE function that can be async in case it needs to calculate based on DATA FROM SERVER.
It's either selector semantically imposes restriction on server data prohibiting it to ever change or selector shouldn't be recklessly called a pure thing.
this man is a god
Great Explanation and it looks really interesting and powerfull
I feel this can help me write performant forms in React since the Context API has limitations - you cant subscribe to a piece of data and adding context dynamically is not something you can achieve per field, hence rendering all fields on every keystroke was looking at using Proxy but got complicated with nested form values.
It feels like subscribing to a slice to data in context, something React is not providing natively, those kinds of use cases where performance is laggy, this library can help.
I'd look at React Final Form, I quite enjoy using it. It uses render props and handles your state and subscriptions for you.
implement debounce. You dont need state managment library for forms.
Hi! I'm curious to know what did you use for this demo, this drag n drop resizable components components are awesome!
great work! Is there a repo where we can find the source code of the example app you show in the demo?
Could you share the repository of this project?
Can you give a simple example, because you can only see some analysis from the video, but you can't see a coherent process, and some steps are still incomprehensible. If there is a complete demo, it will be easier to understand.
I'm just speechless!
Performant, really enjoying the use of that word, it just doesn't quite get used enough...
When he said Async @18:15 ! :D
Not sure that moving components' logic (constraints) into selectors is a good idea or they shouldn't be names as 'selectors'.
Looks cool! Thank you 👍
Looking forward to work with it
Code for this demo app available somewhere?
Awesome video, really well presented
Have anybody tried react-rhino?
It is a very light state management made taking inspiration from Recoil
I still dont get how to do async updates.. cant find any example that works..
easy to use, but the problem here is how to structure the file & state according to the business app? This is my concern. Personally, I think that redux is doing very well :3 so I hopefully will have some example or pattern about that soon :) so excited
A question about the demo at 11:36: The highlighted areas in your slide (those with a yellow outline) indicate the components that are being re-rendered by React, not DOM updates, (although in this case they will be the same). My understanding is that the entire tree of components can re-render, but only those parts of the DOM that have actually changed will be changed in the DOM.
So the optimisation here is reducing the number of render() methods that have to be called. The number of required DOM updates would have been exactly the same had you used Redux instead, even if every component had to be re-rendered every time.
Have I understood this correctly?
He is the one
React already had beautiful hooks for state controlling, necessary only sharing mechanism.
#ReactEurope can you make API the same as the "use-between" hook? To reuse exists React hooks for state control, and don't produce new hooks.
What do you think?
wow!
Is it not the same if we put a subscribe-able (rxjs Subject) in a Contenxt Provider or directly push that subscription to useState?
I feel like Recoil is much more flexible though especially for interdependent state. Sure, you can achieve shared state with rxjs subjects but it isn't quite that flexible.
How does this compare and contrast with two-way data binding?
Where can I get the source code for your app please ?
cool implementation, its a unique twist on redux + effects + selectors, probably solves for a ton of the headaches. As you need to implement a single source of truth you'd likely end up back at some form of redux state.
Does any one have the source code of this ?
This is the way.
can you mutate parent state from child components? that's the only thing I want to be able to do
#ReactEurope Can you give this project ,for testing and learning ?