DEV Community

Narender Saini
Narender Saini

Posted on

Recoil, A new state Management library from Facebook for React

Recoil, A new state Management library from Facebook for React

State management is always the biggest concern for any developer specially in case of global state management. Recently, our beloved Facebook have launched a new state management library called Recoil. In this article we gonna see what features this new Library is offering.

What is Recoil ?

Recoil is a new state management library recently released by Facebook. Recoil is created by the same Creator who created the React. So, internally Recoil works as the same way as React works. Its fast and flexible shared state.

This new library specially designed to work with Pure functions. It also have few features similar to Redux like undo operation, time-travel debugging, routing etc.

How to use Recoil ?

First of all we need to install Recoil like any other package.

npm install recoil --save

Our Recoil library uses 5 different functions to perform state managment.


To use the Recoil state in the project first of all we need to wrap our app using this RecoilRoot Component.

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

function App() {
  return (
      <CharacterCounter />


The term atom represents a piece of state. Any component can read atom and also can update them. Once the value of an atom changes subscribed components will re render.

import {
} from 'recoil';

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)


As the name suggest to use Recoil state we need to use useRecoilState function similar to useState.

import {
} from 'recoil';

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {

  return (
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}


A selector represents a piece of derived state. Here derived state means modification of a state by a normal function.

import {
} from 'recoil';

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;


To read the value of a selector we need to use useRecoilValue.

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;


How to manage global state using React Tracked

Top comments (2)

koprowski_it profile image
Daniel Koprowski

Thanks it's an interesting new feature.

Hint to writing -> You can use word javascript after three backticks ` to highlight your syntax :)

nyashanziramasanga profile image
Nyasha (Nash) Nziramasanga

Thanks for sharing I actually like the ideas around this new React state management