I was looking for a new, light weighted state management library for one of my projects. I evaluated Mobx, Mobx State Tree (MST) and Facebook's new state management library Recoil.

In the end my favorite was Recoil!

Mobx and MST are both great state management solutions. I decided for Recoil, because its light weightiness, minimalism, easy to learn and for sure pretty reactish.

You can watch this session for an introduction to Recoil:

At the beginning I wasn't to happy with Recoil. I didn't like to use atoms and selectors in components directly. After a little playing I was quite happy with encapsulating atoms and selectors in custom hooks.

I build a small example app for how to use Recoil with custom hooks. The app shows posts and comments and is zero styled. I used jsonplaceholder.typicode.com as test API. Means when you add comments they will not be really saved.

Recoil example app

I used the still experimental React Suspense approach for loading. When you use a custom hook with more than one atom or selector you have to keep in mind that your custom hook will trigger suspense if any of your atoms or selectors state change in your hook. I didn't want to trigger a re-render of the post details when I add or reload a comments, so I used two separated hooks, one for posts and the other for the comments.

I've also added some tests. For this little example I wrote only tests for the components with the react testing library and test the hooks implicitly with the component tests.

Thanks for reading and looking forward to your feedback.