Recoil Project Structure Best Practices

Photo by Matthew Henry from Burst

Recoil is React’s best solution so far for global state management. It’s lightweight, simple and performant approach to communicating between components provides a better experience for both the user and the developer than previous libraries like Redux or RxJS. However, the project is very new, and lacks the years of community involvement to produce standard best practices for setting up your project with an eye towards scalability. What follows here is what I’ve found to work best for a large React Native and React Native Web hybrid application.

Problems With Prevailing Structure

Most of the Recoil examples I’ve seen others produce on the web create a structure similar to this:

A single directory is created under /src/recoil which is then split into /atoms and /selectors. This works, but there’s a fundamental problem here that isn’t apparent when you first begin working with Recoil. Let me start with an example of why this isn’t ideal.

Here, we have the /atoms and /selectors folders separating two files…