Recoil your new state management for React Application

Intro

Hey, who is looking for something new and light to manage your state within your React app. Let's check Recoil - a new experimental tool for managing state inside React app from the facebookexperimental team.

My personal impression it's awesome for MVP, Demo, and pets projects. This technology steel under development and at the current moment has version 0.1.2, it's a one-point and another there is still not solid practices and approaches, for some complex situations.

But for small apps, it's amazing mixing inside two approaches like hooks and context, without any overhelmed boilerplate code (salut lovely Redux).

How to setup

Assume you do all npm module installation, and go to coding (As a starter boilerplate I took CRA)

And then import import { RecoilRoot } from "recoil"; and wrap our application root component with RecoilRoot provider

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  rootElement
);

How to use

Now we can use it, let's assume that we have some service with notes, and in one place of application we want to leave note, and then render it in another one.

Creating base component NoteForm.js with textarea

// NoteForm.js
import React from "react";
export default function NoteForm() {
  return (
    <form>
      <textarea onChange={(e) => null} />
    </form>
  );
}

And now we need to store value from our textarea somewhere, for this, we will use atom from recoil, it's almost the same as simple useState, but keeps value on the root provider (like global state in redux).

// NoteForm.js
import React from "react";
import { atom, useRecoilState } from "recoil";
export const inputState = atom({
  key: "inputState", // unique ID (with respect to other atoms/selectors)
  default: "", // default value (aka initial value)
});
export default function NoteForm() {
  const [, setText] = useRecoilState(inputState);
  return (
    <form>
      <textarea onChange={(e) => setText(e.target.value)} />
    </form>
  );
}

Now after typing we store our value inside atom and can use this atom anywhere in our application, let's visualize our Note and get access to our stored atom.

// Note.js
import React from "react";
import { inputState } from "./NotesForm";
import { useRecoilValue } from "recoil";
export default function Note() {
  return <div>{useRecoilValue(inputState)}</div>;
}

And add it to our App.js component

// App.js
import React from "react";
import "./styles.css";
import NotesForm from "./NoteForm";
import Note from "./Note";
export default function App() {
  return (
    <div className="App">
      <NotesForm />
      <Note />
    </div>
  );
}

How to enjoy :)

The full code example is here:

https://codesandbox.io/s/simple-recoil-notes-ry5sw?file=/src/NotesForm.js

We wrote a simple app with simple state manipulation, but with help of Recoil, we have a powerful possibility to share and write state across different hierarchical structures without boilerplate code, and with simple, and predictable behavior.

Resources:

1. https://recoiljs.org/
2. https://www.youtube.com/watch?v=_ISAA_Jt9kI&feature=emb_logo