React状態管理完全ガイド：グローバルとローカルの使い分けを徹底解説

Reactはコンポーネントベースのフレームワークとして、多くの開発者に愛用されています。その中でも「状態管理」は、Reactアプリケーションの安定性やパフォーマンスに直結する重要な概念です。状態とは、UIの現在の状態を記録するデータのことで、コンポーネントの動的な挙動を支える基本となります。しかし、アプリケーションが複雑化するにつれ、状態の管理が難しくなり、ローカルステートとグローバルステートの使い分けが課題となります。本記事では、Reactにおける状態管理の基礎から、ローカルステートとグローバルステートをどのように使い分けるべきかを徹底的に解説します。この知識を習得することで、アプリケーション開発の効率が大幅に向上するでしょう。

状態管理の基本：Reactのステートとは

Reactにおけるステート（state）は、コンポーネントの状態を表現する重要な仕組みです。UIの動的な挙動をコントロールするためのデータとして機能し、アプリケーションの現在の状況を反映します。

ステートの役割

Reactのステートは、次のような場面で使用されます。

• ユーザー入力の追跡
• コンポーネントの内部状態の保持
• 非同期データの管理（例：APIレスポンス）

たとえば、カウントアップするボタンのクリック数を表示するシンプルなReactコンポーネントを考えます。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

ここで使用しているuseStateフックは、Reactの状態管理の基本的な機能です。

ステートが変化する仕組み

ステートは不変のデータとして扱われ、直接変更することはできません。setStateまたはuseStateの更新関数を使用することで、Reactに再レンダリングを指示します。

setCount(newValue);

この再レンダリングプロセスにより、UIが最新の状態に自動的に更新されます。

グローバルとローカルステートの違い

Reactでは、ステートは通常、2つのカテゴリに分けられます。

• ローカルステート：特定のコンポーネント内でのみ使用されるステート。例：モーダルの開閉状態。
• グローバルステート：アプリ全体で共有される必要があるデータ。例：ユーザー情報や認証トークン。

この区分を正しく理解することで、適切な状態管理が可能になります。本記事の次のセクションでは、ローカルステートの活用法とその利点について詳しく説明します。

ローカルステートの使い方とメリット

ローカルステートは、特定のコンポーネントに限定された状態を管理するための仕組みです。シンプルで直感的なため、小規模な機能や独立したUIコンポーネントを作成する際に最適です。

ローカルステートの特徴

ローカルステートは、以下のような特性を持っています。

• 限定されたスコープ：親コンポーネントや他の部分に影響を与えない。
• 簡潔な管理：少ないコード量で実装可能。
• パフォーマンス効率：更新が限定されたコンポーネントのみ再レンダリングされる。

これらの特性により、ローカルステートはモジュール化された設計に適しています。

ローカルステートの実装例

以下は、モーダルの開閉状態を管理する例です。

import React, { useState } from 'react';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleModal = () => setIsOpen(!isOpen);

  return (
    <div>
      <button onClick={toggleModal}>
        {isOpen ? 'モーダルを閉じる' : 'モーダルを開く'}
      </button>
      {isOpen && (
        <div className="modal">
          <p>これはモーダルです。</p>
          <button onClick={toggleModal}>閉じる</button>
        </div>
      )}
    </div>
  );
}

export default ModalExample;

この例では、useStateフックを使い、モーダルの状態（開いているか閉じているか）を管理しています。

ローカルステートのメリット

ローカルステートを使うことで、次のような利点が得られます。

• 分かりやすいコード：小規模なコンポーネントで使用する場合、状態管理が明確。
• 再利用性の向上：他のコンポーネントに依存せずに独立して動作可能。
• 開発効率の向上：初期の開発段階やプロトタイプ作成に適している。

ローカルステートが適している場面

以下のようなシナリオでは、ローカルステートを使用するのが効果的です。

• フォーム入力の一時的なデータ保持
• UIコンポーネントの表示・非表示の切り替え（例：ドロップダウンメニュー）
• ボタンのクリック数や一時的な状態を追跡

ローカルステートはシンプルなUIロジックの実装に最適です。ただし、コンポーネント間で共有する必要が出た場合には、グローバルステートの利用を検討するべきです。この使い分けの基準については、次のセクションで解説します。

グローバルステートの必要性と選択肢

グローバルステートは、アプリケーション全体または複数のコンポーネント間で共有される必要がある状態を管理する仕組みです。ユーザー情報やテーマ設定、認証トークンなど、複数のコンポーネントに影響を及ぼすデータを効率的に管理するために使われます。

グローバルステートが必要な場面

グローバルステートを使用するケースは以下の通りです。

• 認証情報の管理：ログイン状態やユーザー情報を全体で共有する場合。
• テーマや設定の切り替え：ダークモードや言語設定など、アプリ全体に影響する状態。
• ショッピングカートやウィッシュリスト：アイテムの追加・削除が複数コンポーネントで必要な場合。

これらのシナリオでは、ローカルステートでの管理が非効率となり、グローバルステートの使用が適切です。

Reactにおけるグローバルステート管理の選択肢

Reactでは、グローバルステートを管理するためにいくつかの手法があります。それぞれの特徴を理解し、アプリケーションに適した方法を選ぶことが重要です。

Context API

Reactに標準で組み込まれている仕組みで、コンポーネントツリー全体に状態を供給できます。小規模なプロジェクトや状態の数が少ない場合に最適です。

import React, { createContext, useContext, useState } from 'react';

// Contextの作成
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Alice" });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const { user } = useContext(UserContext);
  return <p>ユーザー名: {user.name}</p>;
}

Redux

Reduxは、状態管理の強力なライブラリで、大規模なアプリケーション向けに設計されています。厳密なデータフローを持ち、予測可能な状態管理が可能です。

RecoilやZustand

これらは、Reactでの状態管理をシンプルにするための新しいツールです。特にZustandは、軽量かつ簡潔なAPIが特徴で、プロジェクトの規模を問わず使いやすいです。

グローバルステートを使う際の注意点

• 複雑性の増加：状態が多すぎると、管理が難しくなる。
• パフォーマンスへの影響：適切に分割しないと、不必要な再レンダリングが発生する可能性がある。
• 必要以上に使用しない：ローカルステートで管理できるものは、ローカルステートで処理する。

グローバルステートは強力なツールですが、適切な場面で使うことが重要です。次のセクションでは、ローカルステートとグローバルステートの使い分け基準について具体的に解説します。

ローカルステートとグローバルステートの使い分けガイド

Reactアプリケーションで効率的な状態管理を行うには、ローカルステートとグローバルステートを適切に使い分けることが重要です。それぞれの役割を正しく理解し、用途に応じた選択を行いましょう。

使い分けの基本基準

以下の基準を参考に、ローカルステートとグローバルステートを使い分けることができます。

ローカルステートを使用すべき場合

• コンポーネント単位で完結する状態：たとえば、モーダルの開閉状態やフォームの入力内容。
• 他のコンポーネントに影響を与えない場合：ステートが限定的で独立した機能に関わる場合に最適。
• 一時的なデータ：UI内で瞬時に変更され、保存する必要がないデータ。

グローバルステートを使用すべき場合

• 複数のコンポーネントで共有するデータ：たとえば、認証情報やテーマ設定。
• アプリ全体に影響を与える状態：ユーザーのログイン状態やアプリの言語設定など。
• 非同期で取得され、複数箇所で必要とされるデータ：APIレスポンスやキャッシュデータの管理。

具体例で見る使い分け

以下に、具体例を挙げてローカルステートとグローバルステートの適用シナリオを説明します。

ローカルステートの例：タブの切り替え

タブUIの状態管理は、ローカルステートで十分です。

import React, { useState } from 'react';

function Tabs() {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <button onClick={() => setActiveTab(0)}>タブ1</button>
      <button onClick={() => setActiveTab(1)}>タブ2</button>
      <div>
        {activeTab === 0 ? <p>タブ1の内容</p> : <p>タブ2の内容</p>}
      </div>
    </div>
  );
}

この例では、タブ切り替えの状態は他のコンポーネントに影響しないため、ローカルステートを使用します。

グローバルステートの例：ユーザー情報の共有

ログインしたユーザーの情報をアプリ全体で共有する場合、グローバルステートが必要です。

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Alice", loggedIn: true });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Navbar />
      <Dashboard />
    </UserContext.Provider>
  );
}

function Navbar() {
  const { user } = useContext(UserContext);
  return <p>こんにちは、{user.name}さん！</p>;
}

function Dashboard() {
  const { user } = useContext(UserContext);
  return <p>現在ログイン中: {user.loggedIn ? "はい" : "いいえ"}</p>;
}

この例では、UserContextを使ってグローバルに状態を共有しています。

使い分けのポイントを整理する

• スコープが狭い場合はローカルステートで十分。
• 複数のコンポーネントが状態に依存する場合はグローバルステートを検討する。
• 状態の影響範囲と変更頻度を考慮し、管理の複雑さを最小限に抑えることを目指す。

適切な使い分けを行うことで、コードの可読性と保守性が向上し、開発効率も大幅に改善されます。次のセクションでは、具体的な実装例としてContext APIを使ったグローバルステート管理について解説します。

Context APIの実践例

ReactのContext APIは、グローバルステートを管理するための標準的な方法です。小規模なアプリケーションや、特定の機能に限定した状態の共有に最適です。このセクションでは、Context APIを使った実践例をステップごとに解説します。

Context APIの基本的な仕組み

Context APIは以下の3つのステップで構成されます。

1. Contextの作成：共有する状態を定義します。
2. Providerの実装：状態をコンポーネントツリー全体に提供します。
3. Consumerの利用：状態を必要とするコンポーネントで取得します。

実践例：テーマ切り替え

以下は、ダークモードとライトモードを切り替えるテーマ管理機能の例です。

import React, { createContext, useContext, useState } from 'react';

// 1. Contextの作成
const ThemeContext = createContext();

// 2. Providerの実装
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Consumerの利用
function ThemeToggler() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff", padding: "20px" }}>
      <p>現在のテーマ: {theme}</p>
      <button onClick={toggleTheme}>テーマを切り替える</button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeToggler />
    </ThemeProvider>
  );
}

export default App;

コード解説

Contextの作成

createContext()を使い、ThemeContextを作成します。このContextが、テーマの状態と切り替え関数を提供します。

const ThemeContext = createContext();

Providerの実装

ThemeProviderコンポーネントは、ThemeContext.Providerをラップし、状態と関数を子コンポーネントに供給します。childrenとして渡されたすべてのコンポーネントが、このContextにアクセス可能です。

Consumerの利用

useContext()フックを使い、ThemeContextから現在のテーマと切り替え関数を取得します。これにより、Consumerコンポーネントは簡潔な記述でContextにアクセスできます。

Context APIの利点と注意点

利点

• 状態管理ライブラリを使用せずに、グローバルステートを簡単に共有可能。
• 必要な状態のみを提供でき、無駄な再レンダリングを防ぎやすい。

注意点

• 状態の数が多くなると管理が煩雑になる。
• 再レンダリングが多発する場合は、メモ化や分割管理を検討する必要がある。

Context APIは、シンプルかつ軽量な状態管理ツールとして優れています。次のセクションでは、より大規模な状態管理に向いたReduxの使用例を解説します。

Reduxを使用した高度な状態管理

Reduxは、Reactアプリケーションでの状態管理を強力にサポートするライブラリです。大規模なアプリケーションで、複雑な状態を予測可能かつ統一的に管理する際に最適です。このセクションでは、Reduxの基本的な使い方から、実践的な実装例を紹介します。

Reduxの基本概念

Reduxは以下の3つの主要なコンセプトで構成されています。

1. ストア (Store)

アプリケーション全体の状態を一元管理する場所。

2. アクション (Action)

状態を変更するための指示を表すオブジェクト。タイプ（type）と追加データ（payload）を含みます。

3. リデューサー (Reducer)

アクションに基づき、状態を変更するための純粋関数。

実践例：カウンターアプリ

以下は、Reduxを使ったシンプルなカウンターアプリケーションの例です。

// 1. Reduxのセットアップ
import { createStore } from "redux";
import { Provider, useDispatch, useSelector } from "react-redux";

// アクションの定義
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

// リデューサーの作成
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// ストアの作成
const store = createStore(counterReducer);

// 2. コンポーネントの作成
function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => dispatch(increment())}>増加</button>
      <button onClick={() => dispatch(decrement())}>減少</button>
    </div>
  );
}

// 3. アプリケーション全体にProviderを適用
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

コード解説

アクションの作成

アクションは、状態変更の指示を表すオブジェクトです。この例では、カウントを増減させる2つのアクションを定義しています。

const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

リデューサーの作成

リデューサーは、現在の状態とアクションを基に、新しい状態を返します。

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

ストアの作成

createStore関数を使い、リデューサーを基にストアを作成します。このストアが、アプリ全体の状態を一元管理します。

状態の取得と更新

Reactのコンポーネントでは、useSelectorフックで状態を取得し、useDispatchフックでアクションをディスパッチします。

Reduxのメリットと活用例

メリット

• 予測可能な状態管理：状態の変更がすべてアクションを通じて行われるため、デバッグが容易。
• 一元管理：状態がストアに集中しており、データフローが明確。
• ミドルウェアによる拡張性：非同期処理（例：Redux Thunk）やロギングなど、機能の拡張が可能。

活用例

• 認証情報の管理（例：ユーザーセッションの管理）
• 複数コンポーネントで共有されるAPIデータのキャッシュ
• 大規模アプリケーションでの状態の一元化

Reduxは、Reactの状態管理を強化するための強力なツールです。ただし、小規模なプロジェクトには複雑すぎる場合もあるため、適切な場面で使用することが重要です。次のセクションでは、React QueryやZustandといった代替ツールを紹介します。

React QueryやZustandによる代替アプローチ

Reactの状態管理において、近年注目されているツールに React Query と Zustand があります。これらのツールは、それぞれ特化した用途に最適化されており、状況に応じて使用することで、状態管理の効率を大幅に向上させることができます。このセクションでは、それぞれの特徴と実践例を解説します。

React Queryとは

React Queryは、サーバー状態（APIデータなど）を効率的に管理するためのライブラリです。特に、非同期データのフェッチやキャッシュを扱う場合に非常に便利です。

主な機能

• 非同期データのフェッチとキャッシュ：データの取得とキャッシュを簡単に実装。
• リフェッチの制御：データの更新をタイミングに応じて自動化。
• データのステール管理：古いデータと新しいデータを区別して効率的に扱う。

実践例：APIデータの取得

以下は、React Queryを使ってユーザーデータを取得し、表示する例です。

import React from 'react';
import { useQuery, QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function fetchUsers() {
  return fetch('https://jsonplaceholder.typicode.com/users').then((res) =>
    res.json()
  );
}

function UserList() {
  const { data, isLoading, error } = useQuery('users', fetchUsers);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}

export default App;

React Queryの利点

• サーバー状態管理が簡単になる。
• データの自動リフェッチ機能により、最新データを常に保持できる。
• キャッシュとステール状態の管理が標準機能として組み込まれている。

Zustandとは

Zustandは、軽量でシンプルな状態管理ライブラリです。グローバルステートの管理をシンプルにしつつ、Reactに依存しない設計が特徴です。

主な特徴

• 簡潔なAPI：状態管理の記述が短くて分かりやすい。
• 状態分離：独立した状態管理ロジックを実現。
• 最小限の再レンダリング：更新が必要なコンポーネントのみ再レンダリングされる。

実践例：テーマ切り替え

以下は、Zustandを使ってテーマを切り替える例です。

import create from 'zustand';

// Zustandストアの作成
const useStore = create((set) => ({
  theme: 'light',
  toggleTheme: () =>
    set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

function ThemeToggler() {
  const { theme, toggleTheme } = useStore();

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px' }}>
      <p>現在のテーマ: {theme}</p>
      <button onClick={toggleTheme}>テーマを切り替える</button>
    </div>
  );
}

export default ThemeToggler;

Zustandの利点

• 状態管理が直感的で記述が簡単。
• Reactコンポーネント以外でも状態を共有可能。
• 最小限の依存関係でパフォーマンスが高い。

React QueryとZustandの使い分け

• React Query：サーバーから取得するデータや非同期データの管理に最適。
• Zustand：アプリ内でのグローバルステートの管理や、React以外での状態管理に最適。

まとめ

React QueryとZustandは、それぞれ異なる目的に特化した状態管理ツールです。用途に応じて使い分けることで、アプリケーションの設計を簡素化し、開発効率を高めることができます。次のセクションでは、状態管理におけるパフォーマンス最適化のポイントについて詳しく解説します。

状態管理のパフォーマンス最適化

Reactアプリケーションで状態管理を適切に行うだけでなく、パフォーマンスの最適化を図ることは、スムーズで効率的なユーザー体験の実現に不可欠です。このセクションでは、状態管理におけるパフォーマンス最適化の方法と実践的なテクニックを紹介します。

パフォーマンス最適化の重要性

状態管理が適切でない場合、以下のような問題が発生する可能性があります。

• 不要な再レンダリング：状態の更新により、影響を受けないコンポーネントまで再レンダリングされる。
• 遅延した操作：大量の状態更新が発生すると、ユーザー操作の遅延が顕著になる。
• 複雑性の増加：コードのメンテナンス性が低下し、バグが発生しやすくなる。

以下の最適化手法を取り入れることで、これらの課題を軽減できます。

最適化テクニック

1. 状態の粒度を適切に保つ

状態は必要最小限に分割し、影響範囲を限定することで、再レンダリングを抑えられます。
例: 必要な情報のみをローカルステートで管理し、グローバルステートを安易に増やさない。

2. React.memoの活用

React.memoを使用すると、親コンポーネントの再レンダリング時に、子コンポーネントの再レンダリングを防ぐことができます。

import React, { useState, memo } from 'react';

const Child = memo(({ count }) => {
  console.log('Child rendered');
  return <p>カウント: {count}</p>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>増加</button>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="テキストを入力" />
    </div>
  );
}

export default App;

この例では、Childコンポーネントはmemoによって再レンダリングが最小限に抑えられます。

3. 状態管理ライブラリの最適化機能を活用

• Reduxのreselectライブラリを使用して、メモ化されたセレクタを作成し、不要な計算を回避します。
• React Queryのキャッシュ機能で、サーバーリクエストを効率化します。

4. コンポーネントの分割

大きなコンポーネントを小さな単位に分割し、それぞれ独立して再レンダリングされるようにします。これにより、レンダリング負荷を減らせます。

5. 非同期データの扱いを効率化

非同期データを管理する際は、以下を考慮してください。

• サーバー状態とクライアント状態を分離：サーバー状態の管理はReact QueryやSWRを活用。
• 遅延ローディング：必要なデータのみを取得する。

実践例：リストの仮想化

大量のリストをレンダリングする場合、仮想化ライブラリ（例: react-window）を使用して、表示領域外のレンダリングを抑えます。

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const items = Array.from({ length: 1000 }, (_, index) => `アイテム ${index + 1}`);

function App() {
  return (
    <List
      height={400}
      itemCount={items.length}
      itemSize={35}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>
          {items[index]}
        </div>
      )}
    </List>
  );
}

export default App;

この例では、表示されるアイテムのみをレンダリングすることで、パフォーマンスを最適化しています。

まとめ

Reactの状態管理を最適化することで、再レンダリングの無駄を省き、アプリケーションの応答性を向上させることができます。粒度の適切な状態管理、React.memoや仮想化ライブラリの活用、そして非同期データの効率的な処理を組み合わせることで、スムーズなパフォーマンスを実現しましょう。次のセクションでは、この記事の総まとめを行います。

まとめ

本記事では、Reactの状態管理におけるグローバルステートとローカルステートの使い分けを中心に解説しました。ローカルステートはコンポーネント単位のシンプルな管理に最適であり、グローバルステートは複数のコンポーネントで共有が必要なデータに適しています。また、Context APIやRedux、React Query、Zustandといったツールの活用方法や、パフォーマンス最適化の具体的なテクニックも紹介しました。

適切な状態管理を行うことで、アプリケーションの効率性やメンテナンス性を向上させ、ユーザーに快適な体験を提供することができます。今回学んだ内容を実践に活かし、開発効率をさらに高めていきましょう！