DEV Community

Keith Capers
Keith Capers

Posted on

Using Recoil Basics

State management is 1 of the most important parts of using React and being a frontend developer. In React, global state refers to data that can be accessed and modified by any component in your application, regardless of their position in the component hierarchy. If you have been developing for a little while then you know just how great this functionality is in comparison to passing down props. It's so great React has its own state management tool built in, called Context-API. But like with everything else that's great people try to improve upon it. And more and more versions of the thing get created. This brings us to the global state management library I used recently called Recoil.

Recoil is a state management library for React applications. It was developed by Facebook and provides a simple and efficient way to manage global state in your React apps. Recoil runs on Atoms, an atom holds a piece of data and can be subscribed to by components. When working with atoms it's best to create an atoms component where you can hold them all, and they can be imported by every component. An atom is a variable that is made up of 2 parts a key and a default value. To demonstrate we will make an atom that holds a list of names.

import { atom, selector } from 'recoil'


export const nameState = atom({
    key: 'nameState',
    default: [],
})
Enter fullscreen mode Exit fullscreen mode

Above is a basic recoil atom. Notice at the top of the component you see we import atom from recoil. After that, we declare a variable equal to atom. From there we make our object with a unique key(The easiest thing is to make it the state name) and a default value, and just like that we have a recoil atom being exported that can be imported in other components.

Now that the atom is made there are a few more steps to have the ability to use nameState in another component, and the first is to wrap your main component like App in RecoilRoot.

import { RecoilRoot } from 'recoil';
import React from 'react';


function App () {

return(
   <RecoilRoot>
      <div>
      </div>
   </RecoilRoot>  
)
}

export default App
Enter fullscreen mode Exit fullscreen mode

This is step 2 of getting our atom up and working. In your parent component, you want to import RecoilRoot from recoil and wrap the div of your app component in RecoilRoot. If you are doing a bigger project you will want to wrap your router provider in RecoilRoot which maybe in your index.js file.

At this point you are pretty much all set up to use the atom but there is 1 more part that needs to be done in order for you to be able to use it and that's to create a function to hold and set state in the component you would like to use it.

import { atom, useRecoilState } from 'recoil';
import { nameState } from './Atom'


function NameList() {
  const [names, setNames] = useRecoilState(nameState);


}

export default NameList;

Enter fullscreen mode Exit fullscreen mode

This is the last piece of the puzzle, in the component notice we now import useRecoilState and in parenthesis we have its default set to the atom we created before. From there we create a setter which you see as setNames and names that will hold the list of names. After this last part is set up you can use names to represent the list of names all throughout your code by using another hook called useRecoilValue, which can be done like this.

import { atom, useRecoilValue } from 'recoil';
import { nameState } from './Atom'


function DifferentComponent() {
  const names = useRecoilValue(nameState);


}

export default DifferentComponent;

Enter fullscreen mode Exit fullscreen mode

After all of these pieces are done we can now get this list of names through global state. At this point, I'm sure you see how powerful this state management tool can be. The ability to be able to access data from anywhere in your code is invaluable and although there are a couple of other state management tools recoil maybe the 1 for you. Once you have got the basics down you can dive into a lot of other parts of recoil. For example if you noticed in our atom you see I left in importing a selector, which is derived state in Recoil. Selectors allow you to compute values based on one or more atoms. Once you really dive in you will see a lot more things that may make recoil the global state management library for you.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more