DEV Community

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

Posted on

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

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)

Collapse
 
brainless profile image
Sumit Datta

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

Collapse
 
dance2die profile image
Sung M. Kim

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

Collapse
 
yaldram profile image
Arsalan Ahmed Yaldram

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

Collapse
 
wobsoriano profile image
Robert

You're welcome!

Collapse
 
alirezatk73 profile image
Alireza

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

Collapse
 
wobsoriano profile image
Robert

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

Collapse
 
alirezatk73 profile image
Alireza • 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?

Collapse
 
ralexand56 profile image
ralexand56

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

Collapse
 
atlanteh profile image
atlanteh

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.

Collapse
 
dance2die profile image
Sung M. Kim

There is also a short 5m Egghead course.
egghead.io/playlists/up-and-runnin...

Collapse
 
ralexand56 profile image
ralexand56

Is this library compatible with react-native?

Collapse
 
wobsoriano profile image
Robert

Yes.