Getting Started With Recoil

What is recoil? Recoil is a state management library for React. Why use it? For me, I found it much easier and natural to use than redux, especially if you are familiar with using react hooks. I’m going to go over how to setup a simple setup.

Lets Get Started!

To install the recoil package type

npm install recoil

Or if you are using yarn

yard add recoil

After installing recoil, we need to import RecoilRoot and give components access to recoil by nesting them inside RecoilRoot. I did this in my index.js

import on line 6. RecoilRoot wrapped around <App /> line 10–12

Setting up your Atom file

Before getting into state and useState vs useRecoilState hooks, lets setup an atom file. Those of you familiar with redux, the atom file is similar to the store.

i named my file Atoms.js

The first thing we need to do is import { atom } from “recoil”.

Next we need to export the atom as seen in lines 3–6. The key on line 4 can be anything but it needs to be unique. Line 5 is the default value. In this case of a user, I am setting it to an empty object.

If we need more atoms that we want access to throughout the app we can add them to the atom file.

more Atoms

Accessing the atoms

So now we have a user atom which can be accessed from anywhere in the app. But how? Similar to the useState hook, we need to import the hooks from recoil. Also, we need to import the atom we want access to.

// importing hooks from recoil
import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"
// importing atoms from Atoms file. I had mine in a folder called Atoms and the name of the file was Atoms.js
import { userAtom } from "./Atoms/Atoms"

useRecoilState, useSetRecoilState, useRecoilValue

Normally when using the useState hook that would be it. With recoil we have useRecoilState, useSetRecoilState, useRecoilValue.

We use useRecoilState very similarly to useState.

// useState vs useRecoilState

const [user, setUser] = useState({}); // useState
const [user, setUser] = useRecoilState(userAtom); // useRecoilState
// they are almost the same! the default value for useState is set inside (). the default value for useRecoilState is our userAtom that we imported.

useRecoilState lets us write and read the userAtom. useSetRecoilState is used to only write to the atom and useRecoilValue is used to only read from it. If the userAtom is ever modified from anywhere in the app, this component will redraw with updated values.

// for example, if were in another component somewhere in the app and needed to know who the user was, we can import the userAtom and import the useRecoilValue hook from recoil.
import { userAtom } from "./Atoms/Atoms"
import { useRecoilValue } from "recoil"
function ComponentName(){
   
    const user = useRecoilValue(userAtom);
    return (
        <div>Hi {user.name}! // assuming the userAtom object has a name key value pair.
    )
}

Alternatively if we had a component that updates the userAtom but the component doesn’t need to display anything about the user we could use setRecoilState. Because this component would not be reading the Recoil state, when you setRecoilState the component will not unnecessarily redraw when the atom is updated. (optimization!)

const setUser = setRecoilState(userAtom)

For more info on using useState hooks, I’ve written a blog entry here.

So that’s a basic use for Recoil States. No need to pass the state through your component hierarchy. Using the atoms we can access state from anywhere within the app.

I didn’t dive into dynamic atoms but If you would like to read more, you can find the documentation for Recoil at https://recoiljs.org/.