Recoil

Recoilは、Context APIが抱えるこれらの制約・問題を解決するためにFacebookによって提唱された実験的な状態管理ライブラリです。「Atom」「Selector」と呼ばれる単位を使用してアプリケーションデータを管理し、各Atomには一意のキーとそれが管理するデータの一部が含まれています。各Selectorは複数のAtomにもとづく派生状態の一部で、Atom・他のSelectorを受け取る純粋な関数として定義します。これらの単位をHooks APIで操作しながら状態管理を行うのがRecoilです。

useState()との違い

React HooksのuseState()はコンポーネント内でのstate（状態）を管理するのに対し、Recoilはアプリケーション全体でのstateを管理します。

RecoilRoot

Atom

AtomはStateを管理するためのデータストア。
Reduxはアプリケーション全体で状態管理を行うストアが一つなのに対し、RecoilはAtom単位で一つ一つの状態管理を行う。

keyにアプリケーション全体で一意なキー、defaultに状態管理したい値の初期値を設定します。
状態管理したい値一つごとにAtomを一つ作っていく。

ここでは入力したテキストを保持するAtomを作成します。

import { atom } from 'recoil'

export const textState = atom({
  key: 'textState'  // 一意のキー
  default: ''       // 初期値
})

useRecoilState()

ateの取得・更新を行う場合、useRecoilState()を使用します。
useRecoilState()の引数には使用したいstateを渡します。
戻り値は最初の要素にstateの値、２つ目の要素にstateの値を更新するセッター関数であるタプルを返します(React HooksのuseState()と同じ)。