ReactのContextでバケツリレー解消・実装手順と最適化【入門】

モダンWeb開発2026.04.212026.04.21

執筆者編集部

Ulty 編集部

監修者Ulty 代表/編集長

大野浩史

この記事のポイント

React ContextはPropsバケツリレーを解消してデータを共有する標準機能であり、プロジェクト規模に応じてReduxやZustand等のツールと使い分け、Contextの論理的な分割やメモ化で不要な再レンダリングを防ぎパフォーマンスを最適化します。

「Propsのバケツリレーが原因でコードが複雑になり、対応に困っていませんか。効率的なReact Contextの実装方法や、Reduxなどの外部ライブラリとの適切な使い分け基準を詳しく知りたいと考える方は多いはずです。

こうした疑問を解決するために、本記事では具体的な手法を解説します。

本記事の内容

React Contextの基本と具体的な実装手順
外部の状態管理ツールとの使い分けや選定基準
再レンダリングを抑えてパフォーマンスを維持する最適化手法

Context APIを活用すれば、コンポーネントの階層を飛び越えてスマートにデータを共有可能です。煩雑な記述を解消し、React HooksやuseStateと組み合わせた効率的な開発が実現します。

初期化の手順から実戦的なcallbackの活用まで、2026年のフロントエンド開発に欠かせない設計スキルを身につけましょう。保守性の高いコードを書くための秘訣を、ぜひ最後までチェックしてください。

React Contextの基本

React Contextは、コンポーネントツリー全体でデータを効率的に共有するためのReact標準機能です。2026年現在のモダンなフロントエンド開発において、階層が深いコンポーネントへのデータ受け渡しを解決するために不可欠な存在となっています。

状態のバケツリレーの課題

ReactとはMeta社が開発したUI構築のJavaScriptライブラリですが、その開発における大きな課題の一つに「Propsバケツリレー（Props Drilling）」があります。これは中間コンポーネントが利用しないデータを、下位へ渡すためだけにプロパティを受け継ぎ続ける現象を指します。

Propsバケツリレーには以下のデメリットが存在します。

コードの可読性が著しく低下する
中間コンポーネントに不要な依存関係が生まれる
リファクタリング時の修正範囲が広がる

例えば最上位のコンポーネントから5階層下へデータを渡す場合、中間のすべてに記述が必要です。Context APIを活用すれば、この非効率な作業を劇的に改善できます。

グローバルな状態管理の仕組み

React Contextを使用すると、特定のコンポーネントに持たせた状態を他の場所から直接参照できる仕組みを構築できます。Providerという提供者からReact Hooksの一つであるuseContextを利用する消費者へ、データを直接流し込む形です。

従来のPropsによる手法と、React Contextによる状態管理の違いを以下の表にまとめました。

特徴	Propsによる受け渡し	React Context
データ伝達経路	階層を一つずつ下る	必要な箇所へ直接アクセス
コード量	階層が深いほど増える	最小限に抑えられる
保守性	中間層の修正が必要	対象コンポーネントのみで完結
主な用途	直接の親子間の通信	アプリ全体で共有するデータ

2026年のReact環境では「Context.Provider」ではなく、作成したContextをそのままコンポーネントとして記述できるなど、初期化や実装がより簡潔になっています。

導入する目的

React Contextを導入する最大の目的は、アプリケーションの保守性と拡張性を向上させることです。以下の利点を得るために広く利用されています。

Propsバケツリレーの解消により中間層をクリーンに保つ
ユーザー認証やテーマ設定など、アプリ全体に関わる情報を一元管理する
データを使用するコンポーネントを上位の構造から独立させて再利用性を高める

Contextが更新されると、それを使用するすべてのコンポーネントが再レンダリングされる特性があります。useStateやuseReducerと適切に組み合わせ、更新関数を通じた最適化も検討しましょう。頻繁な更新が必要な場合は、外部の状態管理ライブラリとの使い分けがパフォーマンス維持の鍵となります。

React Contextの実装手順

React開発で階層が深くなると発生するPropsバケツリレーは、多くのエンジニアを悩ませる課題です。この問題を解決するReact標準機能がReact Contextであり、2026年現在も型安全な状態管理として広く活用されています。

① createContextで状態を定義する

React Contextの実装は、データの入れ物となるコンテキストオブジェクトの作成から開始します。React入門を終えた方ならスムーズに理解できるはずなので、createContext関数を使用して状態を定義しましょう。

2026年の開発現場では、TypeScriptのジェネリクスを用いて型を指定する方法が一般的です。初期化の際には、以下のポイントを意識してください。

createContextの引数に適切な初期値を設定する
Provider外での参照エラーを防ぐため、初期値にundefinedを許容する設計にする
型定義を明確にして開発時の補完機能を最大化させる

import { createContext } from 'react';

type UserContextType = {
  name: string;
  isLoggedIn: boolean;
};

export const UserContext = createContext<UserContextType | undefined>(undefined);

② Providerでコンポーネントを囲む

コンテキストを作成したら、データを必要とするコンポーネントツリーをProviderでラップします。Providerは、特定の範囲内でデータを利用可能にする境界線の役割を果たします。

アプリケーション全体や特定の機能単位で共通の親コンポーネントに配置するのが基本です。useStateと組み合わせて、動的な状態管理を実現しましょう。

Providerを独立したコンポーネントとして切り出して可読性を高める
React Hooksを活用して動的なステートを管理する
childrenを使用して子コンポーネントを包み込む構成にする

③ value属性で初期データを渡す

Providerには必ずvalue属性を渡す必要があり、これがツリー全体で共有されるデータとなります。2026年のベストプラクティスでは、値と更新用関数をセットで渡す手法が主流です。

更新関数をvalueとして渡すことで、下位コンポーネントから状態を変更できます。管理するデータの種類と用途は以下の通りです。

渡すデータの種類	内容	主な用途
ステート（State）	現在の最新値	コンポーネントでの表示
更新関数（Setter）	値を書き換える関数	ユーザー操作による状態更新

const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState<UserContextType>({ name: 'Guest', isLoggedIn: false });

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

④ useContextで値を取り出す

共有されたデータを使うコンポーネントでは、useContextというReactのHooksを使用します。以前のConsumerコンポーネントより簡潔に記述できるため、現在はuseContextの利用が標準的です。

Contextの値が更新されると、その値を使用しているコンポーネントは自動で再レンダリングされます。大規模なアプリでは、Contextを複数に分割して不要な再レンダリングを抑える設計も検討してください。

useContextは関数コンポーネント内でのみ呼び出す
引数に作成したコンテキストオブジェクトを渡して最新データを受け取る
パフォーマンス向上のため必要に応じてContextの分割を行う

⑤ 保守性の高いカスタムフックを作成する

最終ステップとして、useContextをラップした専用のカスタムフックを作成することをおすすめします。これにより、Providerの外部でContextが呼ばれた際のエラーハンドリングが共通化できます。

ReduxやZustandなどの外部ライブラリを導入しなくても、標準機能だけで十分に高い保守性を確保可能です。以下の手順でカスタムフックを実装しましょう。

useContextでContextの値を取得する
値がundefinedなら適切なエラーを投げる
値が存在する場合のみリターンして各コンポーネントで使い回す

export const useUser = () => {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

このようにReact Contextを正しく実装すれば、Propsバケツリレーを解消したクリーンなコードが実現できます。

React Contextと状態管理ツールの選び方

Reactでの開発において、複数のコンポーネント間でデータを共有する際に直面するのがPropsバケツリレーの問題です。この課題を解決する標準機能がReact Contextですが、2026年現在のモダンな開発ではすべての状態管理をこれだけで行うのは最適ではありません。

プロジェクトの規模や要件に応じて適切なツールを選択することが、保守性の高いコードを書くための第一歩です。ここではReact Contextと主要な状態管理ライブラリの使い分けについて、各ツールの特性を整理しながら解説します。

アプリ規模別の選び方

プロジェクトの規模が大きくなるにつれて、管理すべき状態の量と複雑性は増大します。React Contextは標準機能で手軽ですが、大規模な状態管理には向かない側面があるため以下の基準で選定してください。

小規模：React Context、Zustand、Jotai
中規模：Zustand、Jotai、Recoil
大規模：Redux Toolkit

ライブラリ	学習コスト	パフォーマンス	コード量	推奨規模
React Context	低い	普通	中程度	小規模
Redux Toolkit	やや高い	良好	多め	大規模
Zustand	低い	非常に良い	少ない	小〜中規模
Jotai	低い	非常に良い	少ない	小〜中規模

小規模なプロジェクトであれば、追加のライブラリを導入せずにReact Contextで十分対応できます。中規模以上で状態の更新頻度が高くなる場合は、必要なコンポーネントのみを再レンダリングできる外部ライブラリの検討が必要です。

大規模プロジェクトにはRedux

2026年現在もエンタープライズレベルの大規模プロジェクトにおいて、Redux Toolkitは信頼性の高い選択肢といえます。厳格な一方向データフローにより、状態遷移の予測可能性が確保されるためです。

React Context単体とは異なり、Reduxはすべての状態を一つのStoreで集中管理し、アクションを通じてのみ変更を許可します。学習コストや定型コードの多さが課題でしたが、Redux Toolkitの普及により開発体験は大幅に向上しました。

小規模プロジェクトにはZustand

スピードとシンプルさが求められる小規模プロジェクトでは、Zustandが非常に強力なツールとなります。React HooksベースのAPIを提供しており、useStateの知識があれば短時間で習得可能です。

React Contextで複数の状態を管理する場合と比較して記述量が少なく済み、状態の一部だけを購読するSelector機能も便利です。不要な再レンダリングを自動的に抑制できるため、2026年も軽量かつ高性能な状態管理の標準として支持されています。

標準機能のみで開発する条件

ライブラリを導入せず、React Contextの標準機能のみで状態管理を行うべき条件は、状態の更新頻度が低い場合です。アプリケーション全体で共有する静的なデータへの使用に適しており、具体的には以下のようなユースケースが該当します。

ユーザーのログイン情報や認証状態
UIのテーマ設定やダークモードの切り替え
多言語対応の言語設定
アプリケーション全体の環境変数

React Contextは値が更新されると、Provider配下でContextを消費するすべてのコンポーネントが再レンダリングされます。更新関数のメモ化といった工夫も可能ですが、頻繁に値が書き換わる複雑なフォームなどには不向きです。

React Contextのパフォーマンス最適化

React Contextはコンポーネントツリー全体でデータを共有できる強力な機能です。一方で、不適切な設計を行うとアプリケーション全体のパフォーマンス低下を招く恐れがあります。

Propsバケツリレーを解消するメリットがある反面、大規模なアプリでは不要な再レンダリングが課題になりがちです。2026年のフロントエンド開発において、保守性と速度を両立させるための最適化手法を解説します。

不要な再レンダリングの原因

React Contextにおけるパフォーマンス問題の多くは、値が更新された際の挙動に原因があります。Contextを購読するコンポーネントは、たとえ自分が使うデータに関係がなくても、Context内の値が一つでも変わると強制的に再レンダリングされます。

具体的には、以下の3つのケースで意図しない再描画が発生することが多いです。

Providerに渡すvalueがオブジェクト形式であり、一部のプロパティしか使用していない場合
状態を保持するStateと、更新を担うDispatch関数が同一のContextオブジェクトに混在している場合
高頻度に変化する値をContext経由で管理し、広範囲のツリーが頻繁に更新を繰り返す場合

useMemoで不要な処理を防ぐ

ContextのProviderへ渡す値には、ReactのuseMemoやuseCallbackを活用して最適化を行いましょう。JavaScriptのオブジェクトや関数はレンダリングごとに新しい参照が作られますが、これらをメモ化すれば参照の同一性を保てます。

手法	役割	最適化の対象
useMemo	計算結果やオブジェクトの参照を保持する	Providerに渡すvalueオブジェクト
useCallback	関数の参照を保持する	状態更新に用いるコールバック関数

複数の状態を1つのContextで提供する際は、これらをuseMemoでラップしてください。依存関係が変わらない限りProviderのvalueが変更されたとみなされず、無駄な更新が波及するのを防げます。