DEV Community 👩‍💻👨‍💻

Awais Akram Mughal
Awais Akram Mughal

Posted on

Using Recoil With React

A new State Management Library for React

If you would like to learn more about its need and the thought process behind it. Kindly go to: Recoil Home Page and watch the video at the bottom of the page.


The basic use of Recoil is through the introduction of Atom.

import { atom } from 'recoil'

export const DataEntriesAtom = atom({
  key: 'dataEntries', // * unique Key (with respect to other atoms/selectors)
  default: [] // * default value (aka initial value)
Enter fullscreen mode Exit fullscreen mode

The code is self explanatory with comments.

Here's how you use it in the component.

import React from 'react'
import { useRecoilState } from 'recoil'
import moment from 'moment'

// * Atoms
import { DataEntriesAtom } from '../../Recoil/Data/Atoms'

// * Style
import './index.css'

export default props => {
  const [logbookEntries, setLogbookEntries] = useRecoilState(DataEntriesAtom)

  return (
    <div id='logbook'>
      <div className='title-div'>
        <p className='title'>Logbook</p>
      <div className='logbook-result'>
        { => (
          <div className='entry' key={}>
            <p className='date'>
              {moment(entry.createdAt).format('MMMM Do YYYY')}
            <div className='value'>{entry.value}</div>
Enter fullscreen mode Exit fullscreen mode

But What is the use of the Atom you ask?
If you're using the DataEntriesAtom in any other component and you call the setLogbookEntries from this component, Recoil monitors the change in that particular atom and only re-renders the component that is using this Atom. Simple yet efficient.

It reduces the boilerplate code that you have to write and let's say you have a DOM tree with two main branches that have no link to one another, but you want a node of the separate branch to change its value as soon as you change the value of the current branch.

While using redux, you would have to write a lot of code to get this working. But in this case, just defining an atom with get it working. :)

Also, Notice that we are using useRecoilState imported from Recoil.

Recoil Introduced Selector.

import { selector } from 'recoil'

// * Atom
import { DataEntriesAtom } from './Atoms';

// * API calls
import {
} from '../../Api/Data'

export const GetDataEntriesQuery = selector({
  key: 'dataEntriesQuery',
  get: async ({ get }) => {
    let previousEntries = get(DataEntriesAtom);
    let entries = await GetDataEntriesAPI()

    return previousEntries.concat(entries)
Enter fullscreen mode Exit fullscreen mode

Selectors represent derived state. You can think of derived state as the output of passing state to a pure function that modifies the given state in some way.

Let's Setup Recoil:

In you Parent JS File(In my case it's the index.js)

For Asynchronous calls: you can use Suspense, on calling the selector, Recoil will manage the loading of the Component for you.

import React from 'react'
import ReactDOM from 'react-dom'
import { RecoilRoot } from 'recoil'

// * Routes
import Routes from './Routes'

// * Styling
import './index.css'

      <React.Suspense fallback={<div>Loading...</div>}>
        <Routes />
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.