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.

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

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

[@moatorres]

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

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

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

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

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

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

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

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

[@yashpandey9181]

His presentation skills are exceptional🙌

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

[@sprintwithcarlos]

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

[@davidmalechek9443]

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

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

[@markovujanic]

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

[@lukeyd13]

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

[@mellowgyatso10]

wow simply amazing how easily he explains it !!

[@johnnybueti]

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

[@DiazGunturFebrian]

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

[@haejin7528]

16 minutes in and my mind is officially blown.

[@chetanchaudhary1017]

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

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

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

[@phil-l]

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

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

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

[@barbaracassani6900]

Great idea and excellent presentation. Thank you for that.

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

[@DIEZ919191]

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

[@mithilesh6793]

Lots to learn. Thankyou Dave!

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

[@harishg9429]

Terrific presentation, thank you

[@spacelord.5]

Dave, you are AWESOME! Thanks!

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

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

[@hovhadovah]

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

[@raphaelabadie2518]

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

[@wepranaga]

here from Ben Awad 😆

[@shuowang9328]

+1

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

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

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

[@DaniloJr]

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

[@Deevibedj]

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

[@rhazelett]

Absolutely fantastic. Will be using it asap!

[@samrad7244]

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

[@Biologymidterm]

Will the demo code be available?

[@AngeloRandazzo]

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

[@christalley5192]

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

[@giuseppeleone2339]

Great presentation Dave. 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.

[@ebm_gamer]

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

[@modestslavnic84]

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

[@troyjoachim1746]

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.

[@NiloRiver]

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

[@eder3232]

Could you share the repository of this project?

[@alonsitto124]

I really appreciate it, thanks a lot.

[@none0n]

What is the status of this project?

[@DevMagazineChannel]

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

[@ubaidarshad]

why is still in an experimental ?

[@hichem1027]

Great Explanation and it looks really interesting and powerfull

[@Olleholleh]

React comes with useAtom next year

[@r34ct4]

link

[@niklassoderberg2168]

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

[@dariovieira399]

Awesome video, really well presented

[@Dron008]

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

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

[@v1Broadcaster]

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

[@yannid5456]

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

[@B45i]

Code for this demo app available somewhere?

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

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

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

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

[@justinmitchell5660]

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

[@kreator1545]

Is there a Repository for this?

[@ahmedhamed8324]

I'm just speechless!

[@magne6049]

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

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

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

[@ferooref7614]

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

[@DzintarsDev]

React only?

[@Timur21]

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

[@odessaRoads]

What about devtools?

[@-rXr-]

interesting 😯 , looking forward to it

[@santiagocalvo]

this man is a god

[@ahnoltyhoder]

Dave McCabe casually makes a Sketch clone, just as a demo...

[@GaLzZy.]

Is this a Redux replacement ? :D

[@MatthewM770]

When he said Async @18:15 ! :D

[@romanvasyliev8267]

Jim Morrison of React

[@tooondi]

haha

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

[@aromal_anil]

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

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

[@JuanBonfante]

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.

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

[@nikitaosadchuk1467]

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