Provider パターン

目次

• 使用時機
• 手順
• 詳細
• ソース

場合によっては、アプリケーション内のほぼすべてのコンポーネント(またはすべてのコンポーネント)でデータを利用可能にしたいことがあります。propsを使ってコンポーネントにデータを渡すことはできますが、アプリケーション内のほぼすべてのコンポーネントが props の値にアクセスする必要がある場合、これは困難になる可能性があります。

しばしば prop drilling と呼ばれる問題が発生します。これはコンポーネントツリーの深い層まで props を渡す場合です。props に依存するコードのリファクタリングはほぼ不可能になり、特定のデータがどこから来ているのかを知ることが困難になります。

使用時機

• 多くのコンポーネントが同じデータ(テーマ、認証、ロケール)にアクセスする必要がある場合に使用してください
• 複数のコンポーネント層にまたがって prop drilling が厄介になる場合に役立ちます

手順

• React.createContext() で Context を作成し、その Provider でコンポーネントをラップする
• 消費側のコンポーネントで useContext フックを使用して提供されている値にアクセスする
• カスタムフック(例:useThemeContext)を作成して context の消費ロジックをカプセル化する
• 頻繁に更新される値に対して context の過剰使用を避ける。すべての消費者は変更時に再レンダリングされるため
• 関心事ごとに context を分割して、不要な再レンダリングを最小化する

詳細

App コンポーネントが特定のデータを含んでいるとします。コンポーネントツリーの深い層に、このデータすべてにアクセスする必要がある ListItem、Header、Text コンポーネントがあります。このデータをこれらのコンポーネントに渡すには、複数の層のコンポーネントを通してそれを渡す必要があります。

コードベースでは、以下のようになります:

function App() {
  const data = { ... }

  return (
    <div>
      <SideBar data={data} />
      <Content data={data} />
    </div>
  )
}

const SideBar = ({ data }) => <List data={data} />
const List = ({ data }) => <ListItem data={data} />
const ListItem = ({ data }) => <span>{data.listItem}</span>

const Content = ({ data }) => (
  <div>
    <Header data={data} />
    <Block data={data} />
  </div>
)
const Header = ({ data }) => <div>{data.title}</div>
const Block = ({ data }) => <Text data={data} />
const Text = ({ data }) => <h1>{data.text}</h1>

このようにして props を渡すのは非常に面倒になります。将来 data prop の名前を変更したい場合、すべてのコンポーネントで名前を変更する必要があります。アプリケーションが大きくなるほど、prop drilling はより複雑になります。

このデータを必要としないすべての層のコンポーネントをスキップできるのが理想的です。data の値にアクセスする必要があるコンポーネントに、prop drilling に頼ることなく直接アクセスを与えるものが必要です。

ここで Provider パターン が役に立ちます!Provider パターンを使用すると、複数のコンポーネントでデータを利用可能にできます。そのデータを各層で props を通して下に渡す代わりに、すべてのコンポーネントを Provider でラップできます。Provider は Context オブジェクトによって提供される高階コンポーネントです。React が提供する createContext メソッドを使用して Context オブジェクトを作成できます。

Provider は value prop を受け取ります。これには下に渡したいデータが含まれます。この provider 内にラップされたすべてのコンポーネントは value prop の値にアクセスできます。

const DataContext = React.createContext()

function App() {
  const data = { ... }

  return (
    <div>
      <DataContext.Provider value={data}>
        <SideBar />
        <Content />
      </DataContext.Provider>
    </div>
  )
}

各コンポーネントに data prop を手動で渡す必要がもうありません!各コンポーネントは useContext フックを使用して data にアクセスできます。このフックは data が参照を持つ context を受け取ります。この場合は DataContext です。useContext フックを使用すると、context オブジェクトのデータを読み書きできます。

const DataContext = React.createContext();

function App() {
  const data = { ... }

  return (
    <div>
      <DataContext.Provider value={data}>
        <SideBar />
        <Content />
      </DataContext.Provider>
    </div>
  )
}

const SideBar = () => <List />
const List = () => <ListItem />
const Content = () => <div><Header /><Block /></div>


function ListItem() {
  const { data } = React.useContext(DataContext);
  return <span>{data.listItem}</span>;
}

function Text() {
  const { data } = React.useContext(DataContext);
  return <h1>{data.text}</h1>;
}

function Header() {
  const { data } = React.useContext(DataContext);
  return <div>{data.title}</div>;
}

data 値を使用していないコンポーネントは data と一切やり取りする必要がありません。複数の層を通してこのコンポーネントが必要としていない props を下に渡すことについて心配する必要がなくなり、リファクタリングがはるかに簡単になります。

Provider パターンはグローバルデータを共有するのに非常に便利です。Provider パターンの一般的なユースケースは、テーマ UI ステートを多くのコンポーネントと共有することです。

リストを表示する単純なアプリがあるとしましょう。ユーザーがスイッチを切り替えることで、ライトモードとダークモードを切り替えられるようにしたいです。ユーザーがダークモードからライトモードに、またはその逆に切り替わる場合、背景色とテキスト色が変更されるはずです!現在のテーマ値を各コンポーネントに下に渡す代わりに、コンポーネントを ThemeProvider でラップし、現在のテーマカラーを provider に渡すことができます。

export const ThemeContext = React.createContext();

const themes = {
  light: {
    background: "#fff",
    color: "#000",
  },
  dark: {
    background: "#171717",
    color: "#fff",
  },
};

export default function App() {
  const [theme, setTheme] = useState("dark");

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  const providerValue = {
    theme: themes[theme],
    toggleTheme,
  };

  return (
    <div className={`App theme-${theme}`}>
      <ThemeContext.Provider value={providerValue}>
        <Toggle />
        <List />
      </ThemeContext.Provider>
    </div>
  );
}

Toggle と List コンポーネントの両方が ThemeContext provider 内にラップされているため、provider に value として渡される theme と toggleTheme の値にアクセスできます。

Toggle コンポーネント内で、toggleTheme 関数を使用してテーマを適切に更新できます。

import React, { useContext } from "react";
import { ThemeContext } from "./App";

export default function Toggle() {
  const theme = useContext(ThemeContext);

  return (
    <label className="switch">
      <input type="checkbox" onClick={theme.toggleTheme} />
      <span className="slider round" />
    </label>
  );
}

List コンポーネント自体は現在のテーマの値を気にしません。しかし、ListItem コンポーネントは気にします!テーマ context を ListItem 内で直接使用できます。

import React, { useContext } from "react";
import { ThemeContext } from "./App";

export default function TextBox() {
  const theme = useContext(ThemeContext);

  return <li style={theme.theme}>...</li>;
}

完璧です!現在のテーマの値を気にしないコンポーネントにデータを下に渡す必要がありませんでした。

フック

コンポーネントに context を提供するフックを作成できます。各コンポーネントで useContext と Context をインポートする代わりに、必要な context を返すフックを使用できます。

function useThemeContext() {
  const theme = useContext(ThemeContext);
  return theme;
}

それが有効なテーマであることを確認するために、useContext(ThemeContext) が falsy の値を返す場合はエラーをスローしましょう。

function useThemeContext() {
  const theme = useContext(ThemeContext);
  if (!theme) {
    throw new Error("useThemeContext must be used within ThemeProvider");
  }
  return theme;
}

ThemeContext.Provider コンポーネントでコンポーネントを直接ラップする代わりに、専用の provider コンポーネントを抽出できます。これは context ロジックをレンダリングコンポーネントから分離し、再利用性を向上させます。

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("dark");

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  const providerValue = {
    theme: themes[theme],
    toggleTheme,
  };

  return (
    <ThemeContext.Provider value={providerValue}>
      {children}
    </ThemeContext.Provider>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <Toggle />
        <List />
      </div>
    </ThemeProvider>
  );
}

ThemeContext にアクセスする必要があるコンポーネントは、useThemeContext フックを単純に使用できます。

export default function TextBox() {
  const theme = useThemeContext();

  return <li style={theme.theme}>...</li>;
}

異なる context 用のフックを作成することで、provider のロジックをデータをレンダリングするコンポーネントから簡単に分離できます。

ケーススタディ

一部のライブラリは組み込み provider を提供しており、これらの値は消費側のコンポーネントで使用できます。この良い例は styled-components です。

styled-components ライブラリは ThemeProvider を提供してくれます。各 styled component はこの provider の値にアクセスできます!Context API を自分たちで作成する代わりに、提供されているものを使用できます!

import { ThemeProvider } from "styled-components";

export default function App() {
  const [theme, setTheme] = useState("dark");

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  return (
    <div className={`App theme-${theme}`}>
      <ThemeProvider theme={themes[theme]}>
        <Toggle toggleTheme={toggleTheme} />
        <List />
      </ThemeProvider>
    </div>
  );
}

ListItem コンポーネントにインライン style prop を渡す代わりに、styled.li コンポーネントにします。それは styled component なので、theme の値にアクセスできます!

import styled from "styled-components";

export default function ListItem() {
  return (
    <Li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </Li>
  );
}

const Li = styled.li`
  ${({ theme }) => `
     background-color: ${theme.backgroundColor};
     color: ${theme.color};
  `}
`;

これで ThemeProvider を使用してすべての styled component に簡単にスタイルを適用できます!

トレードオフ

長所

Provider パターン/Context API は、各コンポーネント層を手動で通してデータを渡すことなく、多くのコンポーネントにデータを渡すことを可能にします。

コードをリファクタリングする際に意図せずバグを導入するリスクを軽減します。以前は、後で prop の名前を変更したい場合、この値が使用されたアプリケーション全体でこの prop の名前を変更する必要がありました。

もはや prop drilling に対処する必要がなくなりました。これはアンチパターンと見なされる可能性があります。以前は、特定の prop 値がどこから来たのかが常に明らかではないため、アプリケーションのデータフローを理解することが困難でした。Provider パターンでは、このデータを気にしないコンポーネントに不要に props を渡す必要がなくなりました。

何らかのグローバル状態を保持することは Provider パターンで簡単になります。コンポーネントにこのグローバル状態へのアクセスを与えることができるためです。

短所

場合によっては、Provider パターンの過剰使用はパフォーマンスの問題につながる可能性があります。context を 消費する すべてのコンポーネントは各状態変更で再レンダリングされます。

例を見てみましょう。Button コンポーネントの Increment ボタンをクリックするたびに値が増加する単純なカウンターがあります。また、カウントを 0 にリセットする Reset ボタンが Reset コンポーネントにあります。

Reset コンポーネントは useCountContext を消費していたため、再レンダリングされました。より小さいアプリケーションではこれはそれほど重要ではありません。より大きいアプリケーションでは、頻繁に更新される値を多くのコンポーネントに渡すと、パフォーマンスに悪影響を与える可能性があります。

コンポーネントが更新される可能性のある不要な値を含む provider を消費していないことを確認するために、各ユースケースに対して複数の provider を作成できます。

ソース

• patterns.dev/vanilla/provider-pattern

参考資料

• Context - React
• How To Use React Context Effectively - Kent C. Dodds