Zenn
🪣

useStateのバケツリレーに疲れたからRecoilに入門した。感動した

2024/04/02に公開
Recoil
状態管理
tech

まとめ

  • ステートのバケツリレーに疲れたらRecoilを使おう
  • 導入は__超かんたん__だった
  • 思ったよりuseStateに近くて驚いた
  • 全てのプロジェクトではいらなさそう
  • とりあえずやってみる精神は大切

バケツリレーの限界

Reactを使ってアプリ開発するとき、必須のフックといっても過言じゃないuseState。
私は今までuseStateを使ってステート管理してきました。
グローバルステートを使っていなかったのでステート管理を複数のコンポーネントでしたいときは、一番上の親コンポーネントでステートを定義して子コンポーネントにpropsとして受け渡していました。
私は今までコンポーネントのネストが多くても3つまでだったため、これでも平気でした。

しかし、ユーザー管理をするアプリケーションを作成したときにバケツリレーがしんど過ぎて困ってしまいました。
ここで初めてuseContextを知り、しばらくはこれを使っていました。しかしuseContextを使うとcontextが変更されるたびに親コンポーネントも再レンダリングされることを知りました。またcontextの数だけ_app.jsxをプロバイダーで囲うのが嫌になりしました。

なので私はもっと楽にグローバルステートを管理したいと思うようになりました。
そこで前々から聞いていた、Recoilに入門することにしました。
正直Reduxを学ぼうか迷ったのですが、ReduxではStoreですべてのステートを管理することのリスクや、トレンドなどからRecoilが選ばれました。

いざ入門

さっそくグローバルなステートを管理してやろう、と思い導入しました。
私はNext.jsに導入したのでNext.jsベースで説明していきます。基本的にどのReactプロジェクトでも行けると思います。

npm i recoil

インストールしたら以下の作業を行います。

  1. _app.jsxでコンポーネントをRecoilRootで囲む
  2. srcディレクトリの下にStatesディレクトリを作成します（好みによる）
  3. ファイルを作成しAtomでステートを定義する
  4. 任意の場所で呼び出す

軽く説明。

まず_app.jsxでRecoilRootを以下のように呼び出します。

import '@/styles/globals.css';
import { RecoilRoot } from 'recoil';

export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  )
};

次に/src/Statesディレクトリを作成します。
作成出来たらステートを定義するファイルを作成します。
userSessionStateを定義したければuserSessionState.jsという名前が良いでしょう。
実際にやってみましょう！

import { atom } from "recoil";

export const userSessionState = atom({
    key: "userSessionState",
    default: false,
});

defaultで初期値を設定できます。

それではグローバルステートを使ってみましょう。
ほとんどuseStateと同じように使うことが出来ます。
ただしuseStateとは違い、ステートだけ・ステートを更新する関数だけをそれぞれ呼び出すことが可能です。

const [userSession, setUserSession] =  useRecoilState(userSessionState);
const userSession = useRecoilValue(userSessionState); // ステートの取得のみ可能
const setUserSession = useSetRecoilState(userSessionState); // ステートの更新のみ可能

useStateでいう以下のような感じですね。
ステート定義だけしちゃって、hooksに"Recoil"って付いただけじゃん！！
思ったよりも簡単でした。

const [userSession, setUserSession] = useState(false);

Recoilで呼び出しているhooksの引数に、定義してあげたグローバルステートをぶち込むことで使えるようになります。
ありがたいですね。

プロジェクトに最初から組み込むべき？

ご覧の通り、めちゃくちゃ楽ちんに導入できたRecoil。
グローバルステート管理がこんなに簡単にできるなら、最初からプロジェクトに組み込んでもよさそうです。

見出しの問いに対する私の答えはNoです。
何故か？

  • 簡単に導入できるなら後から必要になってからでも良い
  • なるべくグローバルステートを使わないようにする
  • ボイラーテンプレートとなるから使わなくて済むなら使わない

こんな感じの理由です。

よく「変数のスコープが狭ければ狭いほど良い」と言う言葉を聞きますが、ステートも基本的には一緒だと思います。

あとファイルサイズが肥大化しちゃうので、使わなくて済むなら使わないようにするべきでょう。
ぶっちゃけパーフォンマンスのことを考えないといけないので面倒くさいですが、面倒くさくても改善できるならやらないといけないです。
また、パフォーマンスのことを考えないといけないおかげで、頭を使ってプログラミングできるので楽しいですね。

今回Recoilを触る前は「触ってみたいけど難しそうだしな～時間採らないといけないしな～」と腰が引けてました。
しかし使うキッカケが出来て、実際使ってみたらとても便利や、と気づけました。
なので今回は「とりあえずやってみよう」の大事さを確認できたのも収穫です。
なので新しい技術を取り組むときは思い切って触ってしまったほうが良いと思います！

（ご利用は計画的に）をちょっと頭に入れておけば大丈夫だと思います。

最後は自分の感想になりましたが、以上Recoilに入門してみた記事でした！！
バイバイ👋

GitHubで編集を提案

Discussion