Recoil入門

この記事で学べること

Recoilの基本である

• RecoilRoot
• Atom
• Selector

がどのようなものか、そしてそのように使うのかを学ぶことができます。
※間違った情報があった場合、コメントいただけると助かります。

Recoilとは？

Facebook製のReact状態管理ライブラリ。
下記、公式のREADMEにもあるように、2021/4/4現在まだ実験的な状態管理ライブラリ(まだ公式リリースされていない)です。

Recoil is an experimental set of utilities for state management with React.

RecoilRoot

Recoilを使用するためには対象スコープの外側をRecoilRootコンポーネントで囲む必要があります。
例えばrootコンポーネントをRecoilRootコンポーネントで囲むとグローバルにStateを管理することができます。

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

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atom

Atomは状態管理するためのデータストアのことです。
AtomはkeyでAtom一つ一つにユニークなIDを設定し、defaultで初期値を設定できます。

export const textState = atom({
  key: 'textState',
  default: '',
});

Atomから状態を取得、更新する際はuseRecoilState ()を使用します。

useRecoilStateを使用

function CharacterCounter() {
  return (
    <div>
      <TextInput />
    </div>
  );
}

function TextInput() {
  // Atomで設定したkeyを引数に渡すことで、どのAtomから値を取得するかを特定する
  // 返り値はReact hooksのuseStateと同じ
  // const [状態変数, 状態を変更するための関数] = useRecoilState(atomのkey);
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

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

上記、useRecoilState ()を使えば状態を取得、更新の両方ができますが、取得だけしたい場合はuseRecoilValue を使い、更新だけしたい場合はuseSetRecoilState を使用します。

「useRecoilStateを使用」をuseRecoilValue/useSetRecoilStateを使って書き換える

function CharacterCounter() {
  return (
    <div>
      <TextInput />
    </div>
  );
}

function TextInput() {
  // 取得だけの場合はuseRecoilValueを使用
  const text = useRecoilValue(textState);

  // 更新だけの場合はuseSetRecoilStateを使用
  const setText = useSetRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

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

Selector

SelectorはAtomのstateを加工した値を返したり、Atomのstateを加工して更新するなどの処理を可能にします。
Atom同様、keyでSelector一つ一つにユニークなIDを設定します。
getでstateを加工した値を返し、setでstateを加工して更新します。
Atomが更新される度に再実行されます。

export const charCountState = selector({
  key: 'charCountState', 
  // Atomで管理していた文字列を加工して文字数として返却する
  get: ({get}) => {
   // get()でAtomから値を取得する
    const text = get(textState);

   // 加工した値を返却
    return text.length;
  },
});

function CharacterCounter() {
  return (
    <div>
      <TextInput/>
      <CharacterCount/>
    </div>
  );
}

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

  const onChange = (event) => {
    setText(event.target.value);
  };

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

function CharacterCount () {
  // Selectorを通して状態を取得。ここでは文字数を取得。
  const count = useRecoilValue(charCountState);

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

参考文献

公式サイト
Reactの実験的ステート管理ライブラリRecoilの基本的な使い方
React 新しい状態管理ライブラリ Recoil の紹介