Reduxだけじゃない！React Nativeで使える状態管理3選と選び方

React Nativeでアプリ開発を進めていくと、必ずぶつかるのが「状態管理どうする問題」。

✅ Reduxって聞いたことあるけど、ちょっと難しそう…
✅ Context APIでもいけるの？
✅ 他にもっとラクな方法ないの？

そんな悩みに答えるべく、本記事ではReact Nativeで使えるおすすめの状態管理ライブラリ3選と、プロジェクトに合った選び方のコツをわかりやすく解説していきます。

✅ 本記事でわかること

状態管理の基礎と重要性
Redux以外の選択肢
実務での使い分けポイント

状態管理の基礎と「Redux」の再評価

1. React Nativeでなぜ「状態管理」が必要なのか？

React Nativeでは、以下のような状態が頻繁に登場します：

ユーザーのログイン状態（グローバル）
フォーム入力内容（ローカル）
APIから取得したデータ（非同期＋共有）

小規模ならuseStateだけでもOKですが、画面数や共有データが増えてくると管理が破綻します。

2. 代表格「Redux」──古いけど、やっぱり強い

✅ Reduxの特徴

Reduxは、Reactをはじめとするフロントエンドアプリケーションで広く使われている状態管理ライブラリです。その最大の特徴は、データフローが一方向であるという点にあります。すべての状態の変更は、アクションを通じて明確に定義されたルールに従って行われるため、アプリの状態遷移が非常に予測しやすくなります。これにより、バグの原因を特定しやすく、アプリ全体の可読性や保守性が向上します。

また、Reduxは公式ドキュメントが非常に充実しており、学習リソースが豊富なのも魅力です。実際のプロジェクトで活用できるようなチュートリアルやベストプラクティスが整備されており、エコシステムも活発です。Redux Toolkitの登場により、以前よりも簡潔に記述できるようになり、導入のハードルも下がっています。

さらに、ミドルウェアを使うことで非同期処理にも対応可能です。たとえば、redux-thunkを使えば関数ベースでの非同期処理が行えますし、redux-sagaを導入すればより複雑な副作用処理も扱いやすくなります。これにより、APIとの通信や認証処理などもReduxの中で一貫して管理することができます。

✅ Redux Toolkitで激変した使い勝手

以前のReduxは「冗長すぎる」とよく言われましたが、
今はRedux Toolkitという公式ラッパーが登場しており、圧倒的に使いやすくなっています。

// 例：カウンターSlice
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

✅ Reduxはこんな場面に向いている

チーム開発で状態管理のルールを統一したい
状態が複雑・ネスト構造が多い
開発規模が中〜大規模
開発経験者が多いプロジェクト

✅ Reduxを選ぶ際の注意点

学習コストはやや高め（初心者には厳しい）
小規模アプリではオーバースペック
ミドルウェアやDevToolsの導入もセットで考える必要あり

Zustand ― Reduxよりも軽くてシンプル！

React Nativeの状態管理で、「もっと気軽に書きたい！」「型がしっかりしてて読みやすい方がいい！」という方におすすめなのが Zustand（ズスタンド）。

1. Zustandってなに？

Zustandは、Reactの状態管理のための軽量ライブラリ。開発元はReact Queryなどでも有名な Poimandresチーム（旧React-Springチーム）。

✅ 特徴まとめ

近年では、従来のReduxに代わるよりシンプルで直感的な状態管理ライブラリが注目を集めています。こうしたライブラリの最大の魅力は、ボイラープレート（定型コード）がほぼ不要な点です。Reduxのようにアクションやリデューサーを個別に定義する必要がなく、状態の管理が圧倒的にスリムになります。

さらに、状態の定義と利用が同じファイルやスコープ内で完結するため、コードの見通しが良く、実装ミスも起こりにくくなります。「どこで何をしているのか」が直感的に理解しやすいため、特に小〜中規模のプロジェクトでは生産性が大幅に向上します。

また、TypeScriptとの相性が非常に良いのも特徴のひとつです。型の定義と状態管理が密接に結びついているため、型安全性を担保しながら開発でき、補完機能や静的解析の恩恵も最大限に活かせます。開発効率とバグの少なさを両立できる点は、現代の開発現場にとって大きなメリットです。

さらに、React Native環境でも軽量かつスムーズに動作するため、Webとモバイルの両方をカバーしたクロスプラットフォーム開発にも最適です。リソースの限られたスマートフォン上でも、快適なパフォーマンスを発揮します。

2. Zustandの使い方（シンプルすぎてビックリ）

// store/counter.ts
import { create } from 'zustand';

type CounterState = {
  count: number;
  increment: () => void;
};

export const useCounter = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

そして、コンポーネント側ではこう使います：

import { Text, Button } from 'react-native';
import { useCounter } from './store/counter';

export default function MyComponent() {
  const { count, increment } = useCounter();

  return (
    <>
      <Text>{count}</Text>
      <Button title="+1" onPress={increment} />
    </>
  );
}

✅ ContextもProviderも不要！Hooksで直接アクセス！

3. Zustandが向いている場面

小規模〜中規模アプリ（スピード重視）
画面数が多くないアプリ
状態が少なく、シンプルな構成
学習コストを下げたい（初心者・個人開発）

4. ReduxとZustandの比較

Redux Toolkitは拡張性や型安全性に優れた本格派で、大規模アプリやチーム開発に最適です。ただし、学習コストや記述量はやや多めです。

一方、Zustandはとにかくシンプルで導入しやすく、学習コストも低め。記述も少なくて済み、React Nativeでも軽快に動作します。DevTools連携も可能ですが、設定が必要です。

✅ 注意点（Zustandの落とし穴）

グローバルすぎる状態を増やすと「密結合」に注意
状態の変更が多すぎるとパフォーマンスに影響
ミドルウェアやログ機能は手動で導入が必要

Recoil ― 依存関係で差がつく“次世代型”状態管理ライブラリ

React Nativeでも注目されている状態管理ライブラリ「Recoil」。Reactチームが公式に開発しているライブラリで、特徴は“依存関係の自動管理”と“再レンダリングの最小化”です。

1. Recoilとは？

Recoilは、Facebook（現Meta）が開発した状態管理ライブラリで、グローバルな状態を持ちつつ、Reactの思想に沿った書き方ができるのが特徴です。

✅ 特徴まとめ

Recoilは、atomとselectorを使って状態を定義でき、ReactのuseStateのような感覚で使えるのが特徴です。状態ごとの再レンダリングが最小限に抑えられるため、パフォーマンスの向上にもつながります。

さらに、依存関係を自動で追跡してくれる仕組みがあり、状態の更新がとてもスムーズ。Context APIよりも柔軟に使え、複雑な状態の関係性も自然に表現できます。

加えて、React Nativeでも問題なく動作し、導入の手軽さや軽さも魅力のひとつです。全体として、直感的かつ高機能な状態管理を実現できるライブラリと言えます。

2. Recoilの基本的な使い方

まず、RecoilRootでアプリを包みます。

import { RecoilRoot } from 'recoil';

export default function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

次に、atom（状態）を定義：

// atoms/counter.ts
import { atom } from 'recoil';

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

コンポーネント内で使う：

import { Text, Button } from 'react-native';
import { useRecoilState } from 'recoil';
import { counterState } from './atoms/counter';

export default function MyComponent() {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <>
      <Text>{count}</Text>
      <Button title="+1" onPress={() => setCount((c) => c + 1)} />
    </>
  );
}

3. selectorで状態の計算もラクラク

import { selector } from 'recoil';
import { counterState } from './atoms/counter';

export const doubleCount = selector({
  key: 'doubleCount',
  get: ({ get }) => get(counterState) * 2,
});

これで、状態に依存した計算ロジックも自動的に管理されます。

4. Recoilが向いている場面

状態が複雑に絡み合う中〜大規模アプリ
「再レンダリングの最適化」を重要視するアプリ
状態同士に依存関係がある構造
React Native + 複雑ロジックのアプリ開発

5. Zustand vs Recoilの使い分け

Zustandはシンプルで記述量も少なく、小規模開発に最適な軽量ライブラリです。ただし、状態の依存関係は手動で管理する必要があり、再レンダリングの最適化もやや弱めです。

一方、Recoilはatomとselectorによる自動的な依存管理が強力で、再レンダリングも効率的。その分、記述量や学習コストは少し上がりますが、複雑な状態管理や大規模開発に向いている構造です。

✅ 注意点（Recoilの落とし穴）

依存関係が増えると構造が複雑になる
複数のatom/selectorの設計がカギ
TypeScript導入でより恩恵が得られるが、設計力が求められる

React Native状態管理の選び方 ― プロが使い分ける基準とは？

ここまで3つの状態管理ライブラリ（Redux、Zustand、Recoil）を紹介しました。では実際にReact Nativeのプロジェクトでは、どのライブラリをいつ使うべきか？

この回では、それぞれの選定基準と、実際のプロジェクトでの使い分け方を解説します。

1. 状態管理選びの3つの軸

まずは「どれを選ぶか」の前に、以下の3つの観点でプロジェクトを評価しましょう：

スケール：アプリの規模は？今後の拡張予定は？
チーム構成：1人開発？複数人？バックエンドとの連携は？
学習・保守コスト：後から別の人が引き継いでも問題ない？

2. どの状態管理がどのシーンに向いている？

小規模アプリ・1人開発・最速プロトタイプでは、Zustand、
中〜大規模開発・パフォーマンス重視では、 Recoil、
大規模開発・チーム開発・ルール厳守では、Redux Toolkitが向いています。

3. 状態管理の選び方マトリクス

┌────────────┬────────────┐
│ 状態がシンプル │ 状態が複雑      │
├────────────┼────────────┤
│ UI中心        │ Zustand        │
│ 依存関係あり   │ Recoil         │
│ グローバルに管理│ Redux Toolkit │
└────────────┴────────────┘

4. 併用という選択肢もアリ！

状態の性質によって、複数の状態管理を併用するという選択肢もあります。

例：

グローバルな認証情報：Redux
一時的なフォーム状態：Zustand
複雑な状態依存関係：Recoil

このように、「全部を1つでやろうとしない」のが最近のトレンドです。

5. 実務での選定フロー（例）

1. 状態の量と複雑さを洗い出す
2. 画面単位のstateならZustandで軽く書く
3. 複数stateが相互依存ならRecoil
4. 多人数・中長期案件ならRedux Toolkitで統一

まとめ

🔑 状態管理ライブラリ選定まとめ

小〜中規模・最速開発なら → Zustand
　シンプルで記述も少なく、すぐに使えて学習コストも低め。

複雑な依存関係や再利用性を重視するなら → Recoil
　自動で依存を管理でき、状態の構造が複雑でも扱いやすい。

長期運用・複数人での開発には → Redux Toolkit
　拡張性・保守性が高く、大規模プロジェクトにも安心。

最後に：あなたにとっての“最適解”は？

React Native開発において、状態管理は機能性と開発効率のカギです。大切なのは「流行り」ではなく「プロジェクトに合っているか」。

✅ 自分の目的
✅ チームの体制
✅ 状態の性質

これらを踏まえて、しなやかに選び、必要なら乗り換える柔軟性を持ちましょう。