0Pricing
React Academy · レッスン

Contextを使わないケース

propsの受け渡し、コンポジション、state managerのほうが適しているケースを見分けます。

「Contextを使わないケース」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React Context が適さない場合と、props の受け渡し、コンポジション、state manager のほうが適切でシンプルな選択肢になる状況を学びます。

コンテキストは万能薬ではありません

コンテキストは過剰に使われがちです。プロップの受け渡しを避けるために使いたくなりますが、その結果、隠れた依存関係が生まれ、コンポーネントのテストが難しくなり、パフォーマンスが低下することもあります。

プロップのほうが適している場合

ある値を、密接にネストされた1〜3個のコンポーネントで使う場合は、プロップを渡すほうがシンプルで明示的であり、追跡もしやすくなります。コンテキストを使うとプロバイダーの定型コードが増え、データフローが隠れてしまいます。
// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

コンポジションのほうが適している場合

3階層以上にわたるプロップのバケツリレーを避けたい場合は、まずコンポジションを試してください。完全にレンダリングされた利用側のコンポーネントをプロップとして渡します。コンテキストは不要で、データフローも明示されたままです。

コンテキストは隠れた結合を生みます

useContext(UserCtx)を呼び出すコンポーネントは、UserProviderでラップしなければ再利用できません。プロップなら依存関係が明示されるため、コンポーネントのシグネチャから必要なものを正確に確認できます。

高頻度な更新

1秒間に何度も変化する値(マウス位置やアニメーションの進行状況など)には、コンテキストを使わないでください。変更のたびに、すべての利用側コンポーネントが再レンダリングされます。代わりに、ref、外部ストア、またはシグナルベースのライブラリを使ってください。

コンテキストは状態管理ツールではありません

コンテキストは値を配布するだけで、組み込みのキャッシュ、開発者ツール、ミドルウェアはありません。頻繁に更新される複雑な共有状態には、この目的のために作られたZustand、Redux、またはJotaiを使ってください。

サーバー状態はコンテキストに置くものではありません

サーバーから取得したデータ(ユーザー一覧や投稿など)は、コンテキストに置くものではありません。React Query、SWR、またはRTK Queryは、キャッシュ、バックグラウンドでの再取得、エラー状態を備えたサーバー状態管理を行いますが、コンテキストにはこれらの機能がありません。

フォームの状態はコンテキストに置くものではありません

フォームのフィールドをコンテキストで管理すると、キー入力のたびにすべてのコンテキスト利用側が再レンダリングされます。代わりに、コンポーネントのローカル状態やReact Hook Formのようなフォームライブラリを使ってください。

コンテキストが適切な場合

コンテキストは、現在のユーザーや認証の状態、テーマ(ライト/ダーク)、ロケール/i18n、その他、多くのコンポーネントから読み取られるものの変更頻度が低い、安定した横断的な値に最適です。

理解度チェック

React Contextに保存するデータとして最も適していないものは、次のうちどれですか?

まとめ

認証、テーマ、ロケールのような安定した横断的な値にはコンテキストを使います。1〜3階層の受け渡しではプロップを優先してください。バケツリレーを避けるにはコンポジションを優先します。サーバー状態にはReact Queryを、複雑な共有状態にはZustandやReduxを使ってください。

コース完了

おめでとうございます。**React Contextのパターンとパフォーマンス**を修了しました。コンテキストの分割、値のメモ化、セレクターの適用方法、そして同じくらい重要な、コンテキストをまったく使わないほうがよい場合についても理解できました。

よくある質問

「Contextを使わないケース」レッスンは無料ですか?

はい。「Contextを使わないケース」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Contextを使わないケース」で何を学びますか?

propsの受け渡し、コンポジション、state managerのほうが適しているケースを見分けます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「Contextを使わないケース」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか?

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 再レンダーを抑えるためのContext分割
  2. useMemoによるContext値のメモ化
  3. Context Selectorパターン
  4. Contextを使わないケース
← React Academyに戻る