[React Recoil] Use a Recoil atom to share state between two React components

Recoil is a brand new state management library for React developed by Facebook.

In this quick lesson we're going to learn how to add it to a React app and how to use a Recoil atom in order to share state between two React components using useRecoilState hook

Install:

yarn add recoil

App.js:

We need to wrap the App or where we want to apply state from Recoil within 'RecoilRoot':

import { RecoilRoot } from 'recoil'

function App() {
  return (
    <RecoilRoot>
      <div className="App">
          <Counter />
          <Display />
      </div>
    </RecoilRoot>
  )
}

Counter.js:

import React from 'react'
import { atom, useRecoilState } from 'recoil'

const numState = atom({
  key: 'numState',
  default: 0,
})

export default function Counter() {
  const [number, setNumber] = useRecoilState(numState)
  const upNum = () => setNumber(number + 1)
  return <button onClick={upNum}>{number}</button>
}

It can share state throungh 'atom'.

const numState = atom({
  key: 'numState',
  default: 0,
})

Use in multi components:

export function Display() {
  const [number] = useRecoilState(numState)
  return <h2>{number}</h2>
}

Since we don't need to 'setNumber' in "Display" component, we can use 'useRecoilValue':

import React from 'react'
import { atom, useRecoilState, useRecoilValue } from 'recoil'

const numState = atom({
  key: 'numState',
  default: 0,
})

export default function Counter() {
  const [number, setNumber] = useRecoilState(numState)
  const upNum = () => setNumber(number + 1)
  return <button onClick={upNum}>{number}</button>
}

export function Display() {
  const number = useRecoilValue(numState)
  return <h2>{number}</h2>
}