Recoil: a modern state management library.

When it comes to state management libraries, React has its fair share of them. With new ones popping up from time to time, how is a programmer to know what's best? Last year Facebook introduced a state management library called, you guessed it, Recoil. In this article you are going to discover what Recoil is and why you should use it in your next project.

Disclaimer: As of now Recoil is still considered experimental so use at your own risk

I think it's important to start with how Recoil stacks up against the current most popular state management libraries Redux and Context API.

Why I prefer Recoil over Redux

For one, Recoil is made specifically for React, Redux is not a React library and the store is something that is handled externally. This means that it doesn't have access to React's inner scheduler. Recoil uses react state under the hood, so when React releases concurrent mode Recoil will not be far behind. Also complexity comes into play. To set up even a basic store comes with alot of boilerplate and code. If you want to include async data or caching computed values those are not apart of the base library and will require even more libraries. The creator of Redux recently apologized on Twitter for making Redux so complicated. If that isn't a caution notice. I don't know what it is.

Okay so what's wrong with Context API?

Though not complex, and it is native to React it still has its limitations. When used for recurring or complex updates it isn't very efficient. Sebastian Markbage, an engineer for Facebook, says

Context is ready to be used for low frequency unlikely updates. It's also good to use for static values and then propagate updates through subscriptions. It's not ready to be used as a replacement for all flux-like-state propagation.
In layman's terms: Context API doesn't let you subscribe to a subset of the data it contains.

Alright enough about the competition, what makes Recoil so great?

To start, Recoil is very easy to learn. Its very simple and feels natural to people who are already accustomed to using React hooks. Getting started is a matter of wrapping your app with RecoilRoot, declaring your data with a unit called atom and replacing useState with Recoils useRecoilState. Recoil also allows you to subscribe to the exact piece of data your component consumes, and has built in methods to handle async data flow.

Recoil- The Basics

Atom - atom is a piece of state in Recoil that any component can subscribe to. Changing the value of an atom will result in a re-render from all components subscribed to it. To create an atom we need to provide a key, which should be unique across the application and default value. The default value can be static or a function. This is how it will look.

export const nameState = atom({
key: 'nameState',
default: 'Aiesha Brown'
)}

useRecoilState - a hook that lets you subscribe to an atoms value and update it

useRecoilValue - returns just the value of the atom
useSetRecoilState - returns just the setter function

import {nameState} from './myFile'
const NameInput = () =>{
const [name, setName] = useRecoilState(nameState)
const name = useRecoilValue(nameState)
const setName = useSetRecoilState(nameState)
}

selector - a selector represents a piece of derived state. It lets you build dynamic data that depends on other atoms.

In conclusion

Having a state management library that is easy to learn and is intuitive is important. If you have liked what you've read so far I encourage you to use it in your next project. Stay tuned just to see how well Recoil scales in the future.