自己紹介

著者のイナバくんは、ニジボックスでフロントエンドエンジニアをしていて、とある会社に常駐しています。
プライベートでは、登山やカメラや禁煙などに嗜んでいます。

イナバくんはグローバルステート童貞ですが、業務でライブラリ選定することになったので、速やかにインプットします。

業務では、ローカルステート・サーバーキャッシュはすでに使っています。

ローカルステート: useState, useReducer
サーバーキャッシュ: ReactQuery

ライブラリのリスト

npm trendsで2023/12 現在のインストール数の順番は下記のとおり。

Redux
Zustand
Jotai
Recoil

※ React Context API も比較対象とします。

Redux がやはり圧倒的シェアを持っています。

1. Atom 方式

1-1. Recoil

Recoilは現在ライブラリ開発が停止しているので使うことはないですが、Atom方式の思想を理解するためにインプットします。

global-state.ts

// atomは複数作成できる
export const globalState = atom({
  key: 'globalState', // 一意のキー
  default: '', // デフォルト値
});

component.tsx

// 複数のページ・コンポーネントで使える
const [state, setState] = useRecoilState(globalState);

useStateを複数のページに跨って共有できるような書き味。

中央集権的に管理されているStore型と違い、Atomは独立・分散配置されています。
Atom方式では、データの流れは親→子→孫とトップダウンではなく、任意のコンポーネントでデータを定義して、双方向に渡すことができます。

1-2. Jotai

Recoil インスパイアのライブラリ。

global-state.ts

// atomは複数作成できる
export const countAtom = atom(0); // 初期値 = 0

component.tsx

// 複数のページ・コンポーネントで使える
const [count, setCount] = useAtom(countAtom);

書き味はRecoilとほぼ同じ。
JotaiはRecoilと違ってAtomのkeyを設定する必要がありません。

2. Store 方式

2-1. Redux(+ Redux Toolkit)

Reduxは概念が多くて大変なんだクポ〜。

2-2. Context API(useContext)

parent.tsx

export const sampleContext = createContext();

const Parent = () => {
  const [count, setCount] = useState(0); // コンテキストに入れるstate
  
  return (
    // contextの数だけProviderを作成する必要あり
    <sampleContext.Provider value={count}>
      <Child/>
    </sampleContext.Provider>
  )
}

child.tsx

const Child = () => {
  const context = useContext(sampleContext); // contextを取得
  
  return <p>{context}</p>;
}

コードはシンプルで分かりやすいですが、グローバルステートの数が増えるとProviderネスト地獄になります。
また、コンテキストを更新するとステートを使っているコンポーネントは再レンダリングされます。

小規模のプロダクトでグローバルステートが少ない場合はマッチしそうです。

2-3. Zustand

Redux インスパイア。

参考文献