複数ページ間にデータを共有した時や、深いコンポーネント階層構造のpropsバケツリレイ問題を解消したい時とか、ReactのContextを利用する手段がある。基本グローバルだが、Providerの括る範囲により局所に制限されることができる。

この記事ではnext.jsでReactのContextを利用する時の心得をメモする。

サンプルのソースコード

早速ソースコードを記載して、心得は全てのこれをベースにしている。

'use client';

import {
  createContext,
  useState,
  useContext,
  type ReactNode,
  type Dispatch,
  type SetStateAction,
} from 'react';

export type Hoge = {
  id?: number;
  name: string;
  values: string[];
};

const HogeContext = createContext<Hoge | undefined>(undefined);
const HogeUpdateContext = createContext<Dispatch<SetStateAction<Hoge>> | undefined>(undefined);

type Props = {
  children: ReactNode;
};

export function HogeProvider({ children }: Props) {
  const [searchCondition, setHoge] = useState<Hoge>({
    id: undefined,
    name: '',
    values: [],
  });

  return (
    <HogeContext.Provider value={searchCondition}>
      <HogeUpdateContext.Provider value={setHoge}>{children}</HogeUpdateContext.Provider>
    </HogeContext.Provider>
  );
}

export const useHoge = () => {
  const context = useContext(HogeContext);
  if (context === undefined) {
    throw new Error('useHoge must be used within a HogeProvider');
  }
  return context;
};

export const useHogeUpdate = () => {
  const context = useContext(HogeUpdateContext);
  if (context === undefined) {
    throw new Error('useHogeUpdate must be used within a HogeProvider');
  }
  return context;
};

心得1：Context利用のため、next.jsの`'use client';`をContextのソースコードファイルに記載する

next.jsのapp routerを利用する場合、RCC(React Client Component)しかContextを利用できない。RSC(React Server Component)からContextのProviderを利用する可能性があるので、Context定義ファイルに'use client';を付けた方が無難。

心得2：valueとvalueを更新する関数は別々のContextにする

このアンチパターン記事に書いた通り、{hoge, setHoge}オブジェクトを１つのContextに纏める場合、片方が変わったら、新たのオブジェクトが生成されるため、hogeとsetHogeの利用されるところが全て再描画されてしまう。

setHogeが基本不変なものであり、hogeと別のContextに設定する場合は、お互いに影響せず、パフォーマンスの悪い影響が避けられる。

  return (
    <HogeContext.Provider value={searchCondition}>
      <HogeUpdateContext.Provider value={setHoge}>{children}</HogeUpdateContext.Provider>
    </HogeContext.Provider>
  );

心得3：繋ぎ込みも同じファイルにする

ProviderとContext定義を１つのファイルの中に纏める
Context自体を公開せず、代わりにContext値を取得するHooksを定義する

心得4：初期値をundefinedにして、Hooks中にundefinedチェックを行なう

HogeProviderで括るコンポーネント中からしかuseHogeやuseHogeUpdateを利用できないが、実装時に忘れていた場合、ちゃんとErrorを出すようにして、正しい使い方を保証する。

export const useHoge = () => {
  const context = useContext(HogeContext);
  if (context === undefined) {
    throw new Error('useHoge must be used within a HogeProvider');
  }
  return context;
};

export const useHogeUpdate = () => {
  const context = useContext(HogeUpdateContext);
  if (context === undefined) {
    throw new Error('useHogeUpdate must be used within a HogeProvider');
  }
  return context;
};

心得5：stateとreducerの使い分け

上記サンプルソースコードのような単純な丸ごとのデータ更新の場合はstateを利用する
データに対して追加、削除、更新みたい色んな操作がある場合はreducerを利用する

参考記事