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

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

wobsoriano profile image Robert ・1 min read

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.


Editor guide

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.


Zustand is my go-to state management library now.

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


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


You're welcome!


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

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


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


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


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


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.


There is also a short 5m Egghead course.


This is very interesting, but, come on, this is model like mobx-model and selectors like redux-selectors. It looks familiar. We have state container, react helpers for the Provider component, functions and hooks for the handle, observe and derive the new state. Why this is positioned as a new concept?


Is this library compatible with react-native?