Recoil — Another React State Management Library?
--
There are many React state management libraries, and new ones pop up from time to time. But it is not every day that Facebook themselves introduce a state management solution. Is it any good? Does it bring anything new to the table? Let’s dive in and see if it’s worth your time (spoiler: yes, it does).
It was quite something, watching Dave McCabe, A Facebook software engineer, introduce a new state management library during the online React Europe 2020 event on Youtube.
Sure, as of May 2020, Recoil is still experimental (though assumably used in production in some of Facebook’s inner tools), and not quite official, but it’s still interesting to see what led McCabe and his co-workers at Facebook to write this library, which is now open-sourced.
While working on one of their tools with a complex UI and trying to find the best solution for global state management, they hit a performance and efficiency wall. They decided that the best way would be to write their own library.
What’s wrong with Redux or Mobx?
There is nothing wrong with the existing libraries, to be frank. But the thing is, they are not React libraries. The store is something that is handled “externally”, hence doesn’t have access to React’s inner scheduler. Why is it important? For now, it isn’t. But concurrent mode is around the corner, and we can assume that Facebook software developers are using it already. For them, it was important to write a solution that will feel and act React and will be able to easily support concurrency (Recoil is using react state under the hood, and concurrency support should be added in the following weeks).
Also, some libraries (Redux..), while providing robust tools, come with a high cost — to set up even the most basic store, you need to write a lot of boilerplate and verbose code. Furthermore, important features such as dealing with async data, or caching computed selector values, are not part of the base library and require even more third-party libraries solutions. And if God forbid, a selector needs to receive a dynamic prop, memoizing this one correctly is a pain.
