DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Recoil: a modern state management library.
ABailey92
ABailey92

Posted on • Updated on

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'
)}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (9)

Collapse
promikecoder2020 profile image
ProMikeCoder2020

To be fair i tried xstate as my first state management library and from what i have been seeing from the others it is judt so much more clean, less time spent on state bugs, better for code reusability between react and react native, etc

Collapse
abailey92 profile image
ABailey92 Author • Edited on

I havent tried it in react native yet. Thanks for the tip!

Collapse
promikecoder2020 profile image
ProMikeCoder2020 • Edited on

Hope you enjoy it. It is a truly awesome but underrated library

Collapse
hanna profile image
Hanna

Recoil definitely seems easier than redux, it has been a joy to work with especially in large scale applications.

Collapse
abailey92 profile image
ABailey92 Author

For sure. Once you learn React hooks, Recoil is a breeze! Redux was far too complex for anything that I've built thus far.

Collapse
_hs_ profile image
HS

Nice article and since I'm starting again with the frontend, it's good to see these comments about how easier it is so I will check it out. Thanks.

Thread Thread
abailey92 profile image
ABailey92 Author • Edited on

Cool be sure to link your project! I love seeing new ideas come to life!

Collapse
abailey92 profile image
ABailey92 Author

Let me know how you like it! I am working on a website now that will use Recoil.

πŸ‘€ Just want to lurk?

Β 
That's fine, you can still create an account and turn on features like 🌚 dark mode.