Recoil for React Recoil - an experimental state management library for React apps open-sourced by Facebook

#react #javascript #reactnative

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously.

Here is the repo and if you want to jump straight to the Getting Started to see how it compares to other state management options.

And here's an awesome video from the library author explaining a bit more about Recoil from today's React Europe livestream.

The docs are incomplete yet, but this looks very promising and easy to use.

Top comments (12)

Sumit Datta • May 15 '20

Hey Robert, thanks so much for sharing. Nice stuff here, watching the video now. I am looking at better/different state management for my product so this will help in brainstorming.
Sumit

Sung M. Kim • May 15 '20

Zustand is my go-to state management library now.
github.com/react-spring/zustand

You'd create a custom hook and the states shared unlike built-in react hooks.

No context, no boiler plates, async handled automatically, and supports Redux devtools (but no, it's not Redux based).

Arsalan Ahmed Yaldram • May 15 '20

Try using easy-peasy state management library: - easy-peasy.now.sh/

Robert • May 15 '20

You're welcome!

Alireza • May 15 '20

So this is Context API without so much context. you would need a bit of boilerplate code to set it up properly refer to Kent c Dodds article =>
kentcdodds.com/blog/how-to-use-rea....

Effectively and not to mention the complex Redux. And it has built-in async, which is a plus and prevents unnecessary re-renders of reducers and components and takes it to the next level; however, I hope we can see this idea going through and see what comes up, but I find the selectors a bit confusing. like how we can return a new state in a selector which is dependant on a state in another atom without mutating the initial state

Robert • May 15 '20

I think selectors is kinda like computed properties in Vue, what do you think?

Alireza • May 15 '20 • Edited

exactly. It initiates after an atom state is changed and you can do anything with it or can we? like doing an API call?

ralexand56 • May 16 '20

You can use selectorFamily to pass parameters into your selector get function.

atlanteh • May 16 '20

Hey, Thank you for this library!
Maybe I didn't get this all sinked in.. I wonder how different this is from Redux + Reselect.
If I had to design this, what I would do is:

Items are updated in a redux reducers.
Container gets all the ids so it can render the items, but it doesn't pass them anything other than id
Each item is connected directly to its own state using a redux-connect + its own id passed through ownProps
The bounding box issue can be solved by saving all the selected boxes ids in redux, and having reselect selector compute the bounding box.
Constraint can be calculated in the reducer itself
And using a middleware we can listen to any changes including url, and update the state accordingly

If in fact my solution actually works, and I don't miss anything, I'm pretty sure, that at least for the boilerplate to set this up, this library can probably do it with much less code than redux, but I wonder if, other than that, this solution is more performant than the way I'd do it.