Recoil: State Management for Today's React - Dave McCabe aka @mcc_abe at

[@sumanth3036]

I wish everyone can present their ideas like him

[@thalibmuhammad9519]

its step by step, no missing step, and pressume audience dont know stuffs

[@Waterwater743]

one day, i will do the same hopefully

[@Andy-si1pl]

I can watch this again and again. He is actually explaining React very well as part of explaining Recoil.

[@MoteeullahAzmi]

how many times you watch this video

[@rickelmonoggin]

"Do you see this as replacing Redux?" - "yes" (immediately).

[@nitrovent]

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.

[@MaximilianoTechera]

This library looks incredibly awesome! I'm looking forward to trying it out.

[@moatorres]

Mate, that's amazing! Well done and thanks for sharing with the world.

[@bartl9798]

"We're going to enter the third dimension" is the nicest way I heard someone describe global variables.

[@jomaramomas7682]

The presenter is very good at presenting and explaining the subject matter.

[@davidacosta6383]

*"..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!

[@felixleupold7459]

Recoil looks amazing. With local state it covers almost all needs.

[@dahnmaier4773]

OMG. This is incredible! I absolutely love it (having dealt with precisely this kind of problems before). Thank you.

[@mellowgyatso10]

wow simply amazing how easily he explains it !!

[@bitzeche]

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!

[@ruhulamin1741]

absolutely. We need the demo app.

[@anshnanda]

I would like this too!

[@stonewu9736]

I need it too

[@michaelczolko6093]

I'd like to see it too

[@JacquesBlom]

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. 🙌

[@sprintwithcarlos]

This is beyond awesome. It'll be as beneficial as hooks

[@xadasol8692]

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.

[@yashpandey9181]

His presentation skills are exceptional🙌

[@brianfontenot9925]

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

[@wistemoor9671]

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

[@kreator1545]

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.

[@maddogshwa]

+1 for any state MGMT tool that doesn't require me to make reducers. :)

[@pumbo_nv]

Have you tried Mobx?

[@islamabo0]

or even react-wisteria?

[@sebastianmorris5394]

Or Apollo client?

[@ytchess]

+1 too!

[@phyolim5064]

or reduxjs/toolkit?

[@davidmalechek9443]

Been using for a couple weeks. Crazy simple. Thank you Recoil.

[@deejaydev]

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!

[@BHFJohnny]

Yeah, nothing like writing 800 lines of Typescript before being able to actually use the store...

[@lukeyd13]

This guy is great at explaining, so much information protrayed in 30 minutes

[@johnnybueti]

The 3D idea to represent state is genius. Kudos!

[@antoniovelazquez9869]

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!

[@markovujanic]

I love this demo, I learned so much about though process and limitations of different React features. thanks

[@yassineelbouchaibi9461]

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.

[@haejin7528]

16 minutes in and my mind is officially blown.

[@chetanchaudhary1017]

I have never seen someone explaining something so good....

[@barbaracassani6900]

Great idea and excellent presentation. Thank you for that.

[@DiazGunturFebrian]

You are the best teacher. Your presentation, your analogy, your explanation is synced with atom

[@winstonnolan]

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

[@RyanMcKeel]

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!

[@harishg9429]

Terrific presentation, thank you

[@raphaelabadie2518]

Thank you, wizards 🧙‍♂ How many projects inside facebook use this technology currently? (May 2022)

[@podeig]

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!

[@JLarky]

I like how whole tone of this presentation as if Redux didn't even exist

[@gsofficial]

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.

[@user-sw1wq8lh2w]

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

[@gsofficial]

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

[@pumbo_nv]

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

[@gsofficial]

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

[@mithilesh6793]

Lots to learn. Thankyou Dave!

[@rickelmonoggin]

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?

[@DIEZ919191]

Hi! I'm curious to know what did you use for this demo, this drag n drop resizable components components are awesome!

[@Deevibedj]

How about using atom values outside of react world ? For example in a helper function not tied to a component

[@AngeloRandazzo]

great work! Is there a repo where we can find the source code of the example app you show in the demo?

[@phil-l]

This was extremely impressive, this is much much more easy to reason vs redux, Recoil feels like JSX where Redux is HTML

[@justinmitchell5660]

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.

[@shikharshrivastava6965]

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

[@asdf_600]

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

[@spacelord.5]

Dave, you are AWESOME! Thanks!

[@rhazelett]

Absolutely fantastic. Will be using it asap!

[@fly.bird.2]

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.

[@DaniloJr]

Can you provide the repo for this demo? Amazing presentation, awesome tool.

[@yannid5456]

I looked at the dom tree of my react code , and noticed that Recoil uses Context Providers as the underlying code.

[@WoutMertens]

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?

[@Spectraevil]

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.

[@NiloRiver]

Very interesting concepts! Nice Work! Very inspiring as well.

[@Biologymidterm]

Will the demo code be available?

[@arromeo121]

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.

[@thatryanp]

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.

[@giuseppeleone2339]

Great presentation Dave. Thanks.

[@hovhadovah]

Looks very promising! Definitely seems less complicated and easier to use than Redux.

[@v1Broadcaster]

driving me nuts that the debugger isn't showing width or height -.-

[@BHFJohnny]

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.

[@andersmellson]

Nice clean API for solving a hard problem 👏🏻👏🏻👏🏻

[@devarsh099]

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.

[@TheHakaseOne]

I'd look at React Final Form, I quite enjoy using it. It uses render props and handles your state and subscriptions for you.

[@pulga961]

implement debounce. You dont need state managment library for forms.

[@alonsitto124]

I really appreciate it, thanks a lot.

[@magne6049]

The Atom's described in this video seems like a ViewModel from the MVVM pattern (alternative pattern to MVC). Are Atom's in effect a ViewModel?

[@MatiasGRodriguez]

Yes, but I would say that any state (react state, redux, mobx, etc, etc) is the ViewModel. The points of this library is just to render only what changed using an API very similar to current React.

[@wepranaga]

here from Ben Awad 😆

[@shuowang9328]

+1

[@hichem1027]

Great Explanation and it looks really interesting and powerfull

[@none0n]

What is the status of this project?

[@samrad7244]

vue3 composition api for React, yay! nice to see the tools converging in concepts

[@jweboy]

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.

[@pzduke]

Wow! I’ll definitely give it a try my very next project with state management. Can somebody please tell what’s the tool/stencils Dave uses for presenting the hand-made-styled schemes?

[@BehindCid]

Maybe excalidraw

[@Dron008]

Not sure that moving components' logic (constraints) into selectors is a good idea or they shouldn't be names as 'selectors'.

[@slavabereza1922]

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?

[@dariovieira399]

Awesome video, really well presented

[@christalley5192]

This is so much better than redux!!!!!

[@magne6049]

How does this compare and contrast with two-way data binding?

[@eder3232]

Could you share the repository of this project?

[@Timur21]

I still dont get how to do async updates.. cant find any example that works..

[@ahmadalibaloch]

Is it not the same if we put a subscribe-able (rxjs Subject) in a Contenxt Provider or directly push that subscription to useState?

[@0x6e95]

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.

[@niklassoderberg2168]

It is very good i use it for everything, even small things.

[@ubaidarshad]

why is still in an experimental ?

[@ytadi9229]

Aren't these issues already solved with MobX? Why comparing with Redux. Should have mentioned MobX atleast once here.

[@eduardoalvarez2497]

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.

[@dawsdep]

He talks about MobX at the end

[@davidsteventaylor]

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.

[@peterabsolon5118]

You what? MobX is light-years away more performant than Redux. Everything is memorized and optimized for you out of the box

[@Olleholleh]

React comes with useAtom next year

[@r34ct4]

link

[@DevMagazineChannel]

Looks cool! Thank you 👍 Looking forward to work with it

[@B45i]

Code for this demo app available somewhere?

[@tptm]

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.

[@aromal_anil]

Have anybody tried react-rhino? It is a very light state management made taking inspiration from Recoil

[@ferooref7614]

Where can I get the source code for your app please ?

[@modestslavnic84]

He works for Pied Piper, right? 😁 Great explanation. Thank you

[@ahmedhamed8324]

I'm just speechless!

[@GaLzZy.]

Is this a Redux replacement ? :D

[@alialabbassi6908]

can you mutate parent state from child components? that's the only thing I want to be able to do

[@kreator1545]

Is there a Repository for this?

[@nikitaosadchuk1467]

#ReactEurope Can you give this project ,for testing and learning ?

[@-rXr-]

interesting 😯 , looking forward to it

[@nguyenmanhcuong6092]

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

[@MatthewM770]

When he said Async @18:15 ! :D

[@youzuhair]

Why not just use MobX?

[@DzintarsDev]

React only?

[@justinmitchell5660]

Performant, really enjoying the use of that word, it just doesn't quite get used enough...

[@BryanFajardo-f6p]

So what's the point of having hierarchy at all? Why not just have nodes all over the place and just manage them using recoil atoms? This reminds me of AWS S3 buckets, where directories don't actually exist, it is just a container with flat files. The illusion of directories are then "created" based on naming conventions. This seems to be heading the same direction except with state, that's why you had to bring "3D" into it. Overhyped imo and excepting a few use cases, likely not needed.

[@kristianulvund4274]

Wow, just wow