[React]ContextAPIのアンチパターン

ContextAPI と useState は本来組み合わせてはいけない

ContextAPI の機能は、コンポーネントの階層を飛び越えてデータを配信することにあります。しかしここで気をつけなければならないのが、Provider に設定する値を useState で管理すると、Provider を持っているツリーが全て再レンダリングされることです。この書き方は最悪のアンチパターンです。

アンチパターン

Provider に渡す値を更新をするのに上位のコンポーネントの useState のディスパッチャーが使用しています。どれか一つでも値を更新すると、全てのコンポーネントが再レンダリングされます。ContextAPI での解説などでこの方法をよく見かけます。しかし値一つの変更で全てを再レンダリングするなら、状態管理の必要性そのものが無くなってしまいます。これはやってはならない書き方です。

import { createContext, useContext, useState } from "react";

type ValueType = { [key: string]: number | undefined };

const context = createContext<ValueType>(undefined as never);

const Component = ({ name }: { name: string }) => {
  const value = useContext(context);
  console.log(name);
  return (
    <div>
      {name}:{value[name]}
    </div>
  );
};

const Page = () => {
  const [value, setValue] = useState<ValueType>({});
  console.log("Main");
  return (
    <>
      <button onClick={() => setValue((v) => ({ ...v, A: (v["A"] || 0) + 1 }))}>
        A
      </button>
      <button onClick={() => setValue((v) => ({ ...v, B: (v["B"] || 0) + 1 }))}>
        B
      </button>
      <button onClick={() => setValue((v) => ({ ...v, C: (v["C"] || 0) + 1 }))}>
        C
      </button>
      <context.Provider value={value}>
        <Component name="A" />
        <Component name="B" />
        <Component name="C" />
      </context.Provider>
    </>
  );
};

export default Page;

• A を押した場合に発生する出力結果

Main
A
B
C

無駄な再レンダリングを起こさないパターン

Provider には useRef で作成したオブジェクトを渡します。Context の更新はミュータブルに行うので、書き換えても再レンダリングは発生しません。再レンダリングを必要とするコンポーネントは、それぞれの state の書き換えで再レンダリングを通知します。Context が持っているデータは、子コンポーネント内のディスパッチャーとなります。

この書き方によって、ボタン A を押した場合は<Component name="A" />のみの再レンダリングとなります。

import {
  createContext,
  Dispatch,
  SetStateAction,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";

type ValueType = {
  [key: string]: Dispatch<SetStateAction<number | undefined>>;
};

const context = createContext<ValueType>(undefined as never);

const Component = ({ name }: { name: string }) => {
  console.log(name);
  const [value, setValue] = useState<number>();
  const dispatches = useContext(context);
  useEffect(() => {
    dispatches[name] = setValue;
    return () => {
      delete dispatches[name];
    };
  }, [name]);
  return (
    <div>
      {name}:{value}
    </div>
  );
};

const Page = () => {
  console.log("Main");
  const dispatches = useRef<ValueType>({}).current;
  return (
    <>
      <button onClick={() => dispatches["A"]?.((v) => (v || 0) + 1)}>A</button>
      <button onClick={() => dispatches["B"]?.((v) => (v || 0) + 1)}>B</button>
      <button onClick={() => dispatches["C"]?.((v) => (v || 0) + 1)}>C</button>
      <context.Provider value={dispatches}>
        <Component name="A" />
        <Component name="B" />
        <Component name="C" />
      </context.Provider>
    </>
  );
};

export default Page;

• A を押した場合に発生する出力結果

A

データを Context 側に持たせつつ、無駄な再レンダリングを防ぐパターン

構造が少々複雑になりますが、同じ名前のデータを複数のコンポーネントが使用した場合も耐えられる書き方です。データを Context 側に保存しつつ、再レンダリングを促すディスパッチャーも管理します。

これによって、対応する名前のデータを使用しているコンポーネントのみが再レンダリングの対象になります。

import {
  createContext,
  Dispatch,
  SetStateAction,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";

type ValueType = {
  dispatches: { [key: string]: Set<Dispatch<SetStateAction<{}>>> };
  values: { [key: string]: number | undefined };
};

const context = createContext<ValueType>(undefined as never);

const Component = ({ name }: { name: string }) => {
  console.log(name);
  const [_, setValue] = useState<{}>();
  const { values, dispatches } = useContext(context);
  useEffect(() => {
    if (dispatches[name]) dispatches[name].add(setValue);
    else dispatches[name] = new Set([setValue]);
    return () => {
      dispatches[name].delete(setValue);
    };
  }, [name]);
  return (
    <div>
      {name}:{values[name]}
    </div>
  );
};

const Page = () => {
  console.log("Main");
  const manager = useRef<ValueType>({ dispatches: {}, values: {} }).current;
  const { dispatches, values } = manager;
  return (
    <>
      <button
        onClick={() => {
          values["A"] = (values["A"] || 0) + 1;
          dispatches["A"].forEach((v) => v({}));
        }}
      >
        A
      </button>
      <button
        onClick={() => {
          values["B"] = (values["B"] || 0) + 1;
          dispatches["B"].forEach((v) => v({}));
        }}
      >
        B
      </button>
      <button
        onClick={() => {
          values["C"] = (values["C"] || 0) + 1;
          dispatches["C"].forEach((v) => v({}));
        }}
      >
        C
      </button>
      <context.Provider value={manager}>
        <Component name="A" />
        <Component name="B" />
        <Component name="C" />
        <Component name="A" />
        <Component name="B" />
        <Component name="C" />
      </context.Provider>
    </>
  );
};

export default Page;

• A を押した場合に発生する出力結果

A
A

まとめ

ContextAPI は Provider 内でデータを配るための機能です。一部で変な誤解が生み出されていますが、けっして無駄な再レンダリングを発生させる機能ではありません。特定のコンポーネントに対して再レンダリングを促したい場合は、各コンポーネント内で setState しディスパッチャーを使います。また、setState は再レンダリングイベントを発生させるためのディスパッチャーの役割が主要機能であって、データを保存するのが主目的ではありません。データを保存したいのであれば useRef が正しい選択です。

今回、解説用にディスパッチャーの呼び出しを剥き出し書いていますが、きちんとラッピングしてやればもっと使いやすくなります。

React を使うとき重要なのはディスパッチャーを適切なタイミングで呼ぶことです。それさえ出来ていればデータをミュータブルで扱っても全く問題ありません。タイミングを適切に管理して、再レンダリングの滝修行をアプリケーションに組み込むのは回避してください。