ReactのContextを分けて余計な再描画を減らす方法

import { createContext, useContext, useState, type ReactNode } from 'react';
import { countRender } from './renders';

type AppValue = {
  theme: 'light' | 'dark';
  count: number;
  increment: () => void;
  toggleTheme: () => void;
};

// テーマもカウンターも、更新する関数も、1つの Context に入れる
const AppContext = createContext<AppValue | null>(null);

function useApp() {
  const value = useContext(AppContext);
  if (!value) throw new Error('AppProvider の中で使ってください');
  return value;
}

function AppProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [count, setCount] = useState(0);
  const value: AppValue = {
    theme,
    count,
    increment: () => setCount((c) => c + 1),
    toggleTheme: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
  };
  return <AppContext value={value}>{children}</AppContext>;
}

function ThemeLabel() {
  countRender('ThemeLabel');
  const { theme } = useApp();
  return <p id="theme">テーマ: {theme}</p>;
}

function IncrementButton() {
  countRender('IncrementButton');
  const { increment } = useApp();
  return <button id="inc" onClick={increment}>+1</button>;
}

// CountLabel・ThemeButton・Header も同じように書く（省略）

export function App() {
  return (
    <AppProvider>
      <Header />
      <ThemeLabel />
      <CountLabel />
      <IncrementButton />
      <ThemeButton />
    </AppProvider>
  );
}

$ node run.mjs ./out/AppOne.mjs
./out/AppOne.mjs
  最初の表示: 「テーマ: light」「カウント: 0」
    描画回数: Header 1 / ThemeLabel 1 / CountLabel 1 / IncrementButton 1 / ThemeButton 1
  +1 を3回押したあと: 「テーマ: light」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 3 / CountLabel 3 / IncrementButton 3 / ThemeButton 3
  テーマ切り替えを1回押したあと: 「テーマ: dark」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 1 / CountLabel 1 / IncrementButton 1 / ThemeButton 1

function AppProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((c) => c + 1), []);
  const toggleTheme = useCallback(
    () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
    [],
  );
  // 値のオブジェクトを useMemo で包む。theme か count が変わると作り直される
  const value = useMemo(
    () => ({ theme, count, increment, toggleTheme }),
    [theme, count, increment, toggleTheme],
  );
  return <AppContext value={value}>{children}</AppContext>;
}

$ node run.mjs ./out/AppOneMemo.mjs
（前略）
  +1 を3回押したあと: 「テーマ: light」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 3 / CountLabel 3 / IncrementButton 3 / ThemeButton 3
  テーマ切り替えを1回押したあと: 「テーマ: dark」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 1 / CountLabel 1 / IncrementButton 1 / ThemeButton 1

// useMemo を使わない Provider（描画のたびに新しいオブジェクトと関数を作る）
function InlineProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(0);
  const value = { count, increment: () => setCount((c) => c + 1) };
  return <CountContext value={value}>{children}</CountContext>;
}

// useMemo で値を包む Provider（count が変わったときだけ作り直す）
function MemoProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(0);
  const value = useMemo(
    () => ({ count, increment: () => setCount((c) => c + 1) }),
    [count],
  );
  return <CountContext value={value}>{children}</CountContext>;
}

// この CountContext は { count, increment } を入れる別の Context。CountLabel・Page・親の App は省略

$ node run-parent.mjs
AppParentInline: 親を3回描き直したあと「親を描き直す（3）」 / 描画回数: Page 0 / CountLabel 3
AppParentMemo: 親を3回描き直したあと「親を描き直す（3）」 / 描画回数: Page 0 / CountLabel 0

// Context を読むコンポーネントそのものを memo で包んでも、効くかどうか
const ThemeLabel = memo(function ThemeLabel() {
  countRender('ThemeLabel');
  const { theme } = useApp();
  return <p id="theme">テーマ: {theme}</p>;
});

$ node run.mjs ./out/AppMemoConsumer.mjs
（前略）
  +1 を3回押したあと: 「テーマ: light」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 3 / CountLabel 3 / IncrementButton 3 / ThemeButton 3
（後略）

import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
import { countRender } from './renders';

type Theme = 'light' | 'dark';
type Actions = { increment: () => void; toggleTheme: () => void };

// 変わるタイミングが違う値を、別々の Context に分ける
const ThemeContext = createContext<Theme>('light');
const CountContext = createContext(0);
const ActionsContext = createContext<Actions | null>(null);

function useActions() {
  const actions = useContext(ActionsContext);
  if (!actions) throw new Error('AppProvider の中で使ってください');
  return actions;
}

function AppProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');
  const [count, setCount] = useState(0);
  // 更新する関数だけをまとめたオブジェクトは、最初の1回だけ作る
  const actions = useMemo<Actions>(
    () => ({
      increment: () => setCount((c) => c + 1),
      toggleTheme: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
    }),
    [],
  );
  return (
    <ActionsContext value={actions}>
      <ThemeContext value={theme}>
        <CountContext value={count}>{children}</CountContext>
      </ThemeContext>
    </ActionsContext>
  );
}

function ThemeLabel() {
  countRender('ThemeLabel');
  const theme = useContext(ThemeContext);
  return <p id="theme">テーマ: {theme}</p>;
}

function CountLabel() {
  countRender('CountLabel');
  const count = useContext(CountContext);
  return <p id="count">カウント: {count}</p>;
}

function IncrementButton() {
  countRender('IncrementButton');
  const { increment } = useActions();
  return <button id="inc" onClick={increment}>+1</button>;
}

// ThemeButton は useActions() から toggleTheme を読む。Header・App は1つの Context の版と同じ（省略）

$ node run.mjs ./out/AppSplit.mjs
./out/AppSplit.mjs
  最初の表示: 「テーマ: light」「カウント: 0」
    描画回数: Header 1 / ThemeLabel 1 / CountLabel 1 / IncrementButton 1 / ThemeButton 1
  +1 を3回押したあと: 「テーマ: light」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 0 / CountLabel 3 / IncrementButton 0 / ThemeButton 0
  テーマ切り替えを1回押したあと: 「テーマ: dark」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 1 / CountLabel 0 / IncrementButton 0 / ThemeButton 0

// 外側は Context を読んで、必要な値だけを props で渡す
function ThemeLabel() {
  countRender('ThemeLabel');
  const { theme } = useApp();
  return <ThemeLabelView theme={theme} />;
}

// 内側は memo で包み、props が同じなら描画を飛ばす
const ThemeLabelView = memo(function ThemeLabelView({ theme }: { theme: string }) {
  countRender('ThemeLabelView');
  return <p id="theme">テーマ: {theme}</p>;
});

$ node run.mjs ./out/AppMemoChild.mjs
（前略）
  +1 を3回押したあと: 「テーマ: light」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 3 / ThemeLabelView 0 / CountLabel 3 / IncrementButton 3 / ThemeButton 3
  テーマ切り替えを1回押したあと: 「テーマ: dark」「カウント: 3」
    描画回数: Header 0 / ThemeLabel 1 / ThemeLabelView 1 / CountLabel 1 / IncrementButton 1 / ThemeButton 1