useContextのしくみ #JavaScript

Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第5回を本人の許可を得て意訳しました。
誤りやより良い表現などがあればご指摘頂けると助かります。

原文： https://daveceddia.com/usecontext-hook/

すべての新しいReact Hooksの中で議論中のテーマがあります。ほとんど全てが、ファンクションコンポーネントをクラスコンポーネント同等にするために存在しています。

useContext フックは少し違っています。仕事をよりラクにしてくれるだけのものです。

ReactのContext APIを知らない方のために補足しておきますと、アプリケーション内深くまでデータを渡す方法、それも手動で複数階層にまたがってバケツリレーをせずに済む方法です。データを引き回すことさえできれば良いという時には、Reduxのようなツールの代替手段として機能します。Contextについて学び、Reduxとの違いを知るにはこちらへどうぞ。

この記事では、 useContext がどのようにContextを扱いやすくするのかを見ていきます。

メモ：Hooksは現在α版であり、プロダクション環境ではまだ使用できません。APIはさらに変更される可能性があるため、現時点ではプロダクションアプリの書き換えはオススメしません。Open RFCにコメントし、公式ドキュメントやFAQにも目を通してください。

従来の一般的な方法

典型的なContext APIの使用例はこのような感じです。

import React from "react";
import ReactDOM from "react-dom";

// Contextを生成する
const NumberContext = React.createContext();
// 2つの値を持つオブジェクトを返す
// { Provider, Consumer }

function App() {
  // Providerを活用して値を全ての
  // 子要素と孫要素に利用可能にする
  return (
    <NumberContext.Provider value={42}>
      <div>
        <Display />
      </div>
    </NumberContext.Provider>
  );
}

function Display() {
  // Consumerを活用してcontextから取得した値を使う
  // このコンポーネントはpropsを取らないことに注意！
  return (
    <NumberContext.Consumer>
      {value => <div>The answer is {value}.</div>}
    </NumberContext.Consumer>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

Context APIについて詳しくはこちらで触れています。

useContextを使ったモダンな方法

Display を useContext フックを使ってリファクタして、どのような感じになるか見てみましょう。

// useContextをimportする（もしくはReact.useContextを使う）
import React, { useContext } from 'react';

// ...

function Display() {
  const value = useContext(NumberContext);
  return <div>The answer is {value}.</div>;
}

これだけです。 useContext を呼び、 React.createContext から取得できるcontextオブジェクトを渡すと、値が利用可能になります。見やすくなったでしょう？

注目すべき唯一のポイントは、contextオブジェクトを丸ごと useContext に渡さなければならないということです。consumerだけではダメです！もし忘れるとReactが警告してくれますが、忘れないでくださいね？

ネストされたConsumer

コンポーネントが複数の親contextからデータを受け取りたいような場合はこうなります。

function HeaderBar() {
  return (
    <CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}

たった2つの値を受け取るのにひどいネストになってしまいます。 useContext を使って良い感じにしてみましょう。

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);

  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

ずっと読みやすくなりましたね。

広がるHooksの世界

今週カバーした以外にも多くのHooksがあります。メモ作成のための useMemo のような素晴らしいものありますので、ぜひ公式のHooks APIドキュメントで学んでみてください。公式ドキュメントも素晴らしいですが、Hooks入門から始めることをおすすめします。

Hooksウィークに投稿した私の他の記事も再掲します。

毎週記事を投稿しています（ビデオもたまに）。もっと情報が必要であれば、ボックスにメールアドレスを登録してください。