状態管理のための高度なReact Context APIパターン

React Context APIは、プロップスのバケツリレーなしでアプリケーション全体の状態を共有するための強力なメカニズムを提供します。基本的な使い方は簡単ですが、そのポテンシャルを最大限に引き出すには、複雑な状態管理シナリオを扱える高度なパターンを理解する必要があります。この記事では、これらのパターンのいくつかを掘り下げ、React開発を向上させるための実践的な例と実用的な洞察を提供します。

基本的なContext APIの限界を理解する

高度なパターンに飛び込む前に、基本的なContext APIの限界を認識することが重要です。シンプルでグローバルにアクセス可能な状態には適していますが、頻繁に変化する状態を持つ複雑なアプリケーションでは、扱いにくく非効率になる可能性があります。コンテキストを利用するすべてのコンポーネントは、コンテキストの値が変更されるたびに再レンダリングされます。たとえ、コンポーネントが更新された状態の特定の部分に依存していなくてもです。これはパフォーマンスのボトルネックにつながる可能性があります。

パターン1: コンテキストを利用した複合コンポーネント

複合コンポーネント（Compound Component）パターンは、コンテキストを通じて暗黙的に状態とロジックを共有する関連コンポーネント群を作成することで、Context APIを強化します。このパターンは再利用性を促進し、利用者向けのAPIを簡素化します。これにより、複雑なロジックをカプセル化し、実装をシンプルにできます。

例: タブコンポーネント

これをタブコンポーネントで説明しましょう。複数のレイヤーを通じてプロップスを渡す代わりに、Tabコンポーネントは共有コンテキストを通じて暗黙的に通信します。

// TabContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface TabContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabContext = createContext(undefined);

interface TabProviderProps {
  children: ReactNode;
  defaultTab: string;
}

export const TabProvider: React.FC = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value: TabContextType = {
    activeTab,
    setActiveTab,
  };

  return {children};
};

export const useTabContext = () => {
  const context = useContext(TabContext);
  if (!context) {
    throw new Error('useTabContext must be used within a TabProvider');
  }
  return context;
};

// TabList.js
import React, { ReactNode } from 'react';

interface TabListProps {
  children: ReactNode;
}

export const TabList: React.FC = ({ children }) => {
  return 
{children}
;
};

// Tab.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabProps {
  label: string;
  children: ReactNode;
}

export const Tab: React.FC = ({ label, children }) => {
  const { activeTab, setActiveTab } = useTabContext();
  const isActive = activeTab === label;

  const handleClick = () => {
    setActiveTab(label);
  };

  return (
    
      {label}
    
  );
};

// TabPanel.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabPanelProps {
  label: string;
  children: ReactNode;
}

export const TabPanel: React.FC = ({ label, children }) => {
  const { activeTab } = useTabContext();
  const isActive = activeTab === label;

  return (
    
  );
};

// 使用例
import { TabProvider, TabList, Tab, TabPanel } from './components/Tabs';

function App() {
  return (
    
      
        Tab 1
        Tab 2
        Tab 3
      
      Content for Tab 1
      Content for Tab 2
      Content for Tab 3
    
  );
}

export default App;

利点:

• 利用者向けのAPIが簡素化される: ユーザーはTab、TabList、TabPanelについてのみ考慮すればよくなります。
• 暗黙的な状態共有: コンポーネントは自動的に共有状態にアクセスし、更新します。
• 再利用性の向上: Tabコンポーネントは異なるコンテキストで簡単に再利用できます。

パターン2: 動的コンテキスト

シナリオによっては、コンポーネントツリー内のコンポーネントの位置やその他の動的な要因に基づいて、異なるコンテキスト値が必要になる場合があります。動的コンテキストを使用すると、特定の条件に基づいて変化するコンテキスト値を作成し、提供することができます。

例: 動的コンテキストによるテーマ設定

ユーザーの好みやアプリケーションのセクションに応じて異なるテーマを提供したいテーマ設定システムを考えてみましょう。ここではライトテーマとダークテーマの簡単な例を作成します。

// ThemeContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme,
  };

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

// 使用例
import { useTheme, ThemeProvider } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
This is a themed component.
      Toggle Theme
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

この例では、ThemeProviderはisDarkThemeの状態に基づいて動的にテーマを決定します。useThemeフックを使用するコンポーネントは、テーマが変更されると自動的に再レンダリングされます。

パターン3: 複雑な状態のためのContextとuseReducer

複雑な状態ロジックを管理するために、Context APIとuseReducerを組み合わせることは優れたアプローチです。useReducerはアクションに基づいて状態を更新するための構造化された方法を提供し、Context APIはこの状態とdispatch関数をアプリケーション全体で共有することを可能にします。

例: シンプルなTodoリスト

// TodoContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

interface TodoContextType {
  state: TodoState;
  dispatch: React.Dispatch;
}

const initialState: TodoState = {
  todos: [],
};

const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

const TodoContext = createContext(undefined);

interface TodoProviderProps {
  children: ReactNode;
}

export const TodoProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const value: TodoContextType = {
    state,
    dispatch,
  };

  return {children};
};

export const useTodo = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider');
  }
  return context;
};

// 使用例
import { useTodo, TodoProvider } from './TodoContext';

function TodoList() {
  const { state, dispatch } = useTodo();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
           dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
           dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
        
      ))}
    
  );
}

function AddTodo() {
  const { dispatch } = useTodo();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}

function App() {
  return (
    
      
      
    
  );
}

export default App;

このパターンは、状態管理ロジックをreducer内に集中させるため、ロジックの理解やテストが容易になります。コンポーネントは状態を直接管理する必要なく、アクションをディスパッチして状態を更新できます。

パターン4: `useMemo`と`useCallback`によるコンテキスト更新の最適化

前述の通り、Context APIにおける主要なパフォーマンス上の考慮事項は、不要な再レンダリングです。useMemoとuseCallbackを使用することで、コンテキスト値の必要な部分のみが更新され、関数の参照が安定していることを保証し、これらの再レンダリングを防ぐことができます。

例: テーマコンテキストの最適化

// OptimizedThemeContext.js
import React, { createContext, useContext, useState, useMemo, useCallback, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = useCallback(() => {
    setIsDarkTheme(!isDarkTheme);
  }, [isDarkTheme]);

  const value: ThemeContextType = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

解説:

• useCallbackはtoggleTheme関数をメモ化します。これにより、関数の参照はisDarkThemeが変更された場合にのみ変更されるようになり、toggleTheme関数のみに依存するコンポーネントの不要な再レンダリングを防ぎます。
• useMemoはコンテキスト値をメモ化します。これにより、コンテキスト値はthemeまたはtoggleTheme関数が変更された場合にのみ変更されるようになり、不要な再レンダリングをさらに防ぎます。

useCallbackがない場合、toggleTheme関数はThemeProviderのレンダリングごとに再作成され、valueが変更される原因となり、テーマ自体が変更されていなくても、コンテキストを利用するコンポーネントで再レンダリングがトリガーされます。useMemoは、その依存関係（themeまたはtoggleTheme）が変更されたときにのみ新しいvalueが作成されることを保証します。

パターン5: コンテキストセレクター

コンテキストセレクターを使用すると、コンポーネントはコンテキスト値の特定の部分のみを購読できます。これにより、コンテキストの他の部分が変更されたときの不要な再レンダリングを防ぎます。これを実現するためには、`use-context-selector`のようなライブラリやカスタム実装を使用できます。

例: カスタムコンテキストセレクターの使用

// useCustomContextSelector.js
import { useContext, useState, useRef, useEffect } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S
): S {
  const value = useContext(context);
  const [selected, setSelected] = useState(() => selector(value));
  const latestSelector = useRef(selector);
  latestSelector.current = selector;

  useEffect(() => {
    let didUnmount = false;
    let lastSelected = selected;

    const subscription = () => {
      if (didUnmount) {
        return;
      }
      const nextSelected = latestSelector.current(value);
      if (!Object.is(lastSelected, nextSelected)) {
        lastSelected = nextSelected;
        setSelected(nextSelected);
      }
    };

    // 通常はここでコンテキストの変更を購読します。これは簡略化された
    // 例なので、初期化のためにすぐにsubscriptionを呼び出します。
    subscription();

    return () => {
      didUnmount = true;
      // 該当する場合、ここでコンテキストの変更の購読を解除します。
    };
  }, [value]); // コンテキストの値が変更されるたびにエフェクトを再実行する

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (簡潔にするため簡略化)
import React, { createContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  setTheme: (newTheme: Theme) => void; 
}

const ThemeContext = createContext(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme: Theme;
}

export const ThemeProvider: React.FC = ({ children, initialTheme }) => {
  const [theme, setTheme] = useState(initialTheme);

  const value: ThemeContextType = {
    theme,
    setTheme
  };

  return {children};
};

export const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error("useThemeContext must be used within a ThemeProvider");
    }
    return context;
};

export default ThemeContext;

// 使用例
import useCustomContextSelector from './useCustomContextSelector';
import ThemeContext, { ThemeProvider, useThemeContext } from './ThemeContext';

function BackgroundComponent() {
  const background = useCustomContextSelector(ThemeContext, (context) => context.theme.background);
  return 
Background
;
}

function ColorComponent() {
  const color = useCustomContextSelector(ThemeContext, (context) => context.theme.color);
  return 
Color
;
}

function App() {
  const { theme, setTheme } = useThemeContext();

  const toggleTheme = () => {
    setTheme({ background: theme.background === 'white' ? 'black' : 'white', color: theme.color === 'black' ? 'white' : 'black' });
  };

  return (
    
      Toggle Theme
      
      
    
  );
}

export default App;

この例では、BackgroundComponentはテーマのbackgroundプロパティが変更されたときにのみ再レンダリングされ、ColorComponentはcolorプロパティが変更されたときにのみ再レンダリングされます。これにより、コンテキスト値全体が変更された際の不要な再レンダリングが回避されます。

パターン6: アクションと状態の分離

より大規模なアプリケーションでは、コンテキスト値を2つの異なるコンテキストに分離することを検討してください。1つは状態用、もう1つはアクション（dispatch関数）用です。これにより、コードの構成とテストのしやすさが向上します。

例: 状態とアクションのコンテキストを分離したTodoリスト

// TodoStateContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const TodoStateContext = createContext(initialState);

interface TodoStateProviderProps {
  children: ReactNode;
}

export const TodoStateProvider: React.FC = ({ children }) => {
  const [state] = useReducer(todoReducer, initialState);

  return {children};
};

export const useTodoState = () => {
  return useContext(TodoStateContext);
};

// TodoActionContext.js
import React, { createContext, useContext, Dispatch, ReactNode } from 'react';

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

const TodoActionContext = createContext | undefined>(undefined);

interface TodoActionProviderProps {
    children: ReactNode;
}

export const TodoActionProvider: React.FC = ({children}) => {
    const [, dispatch] = useReducer(todoReducer, initialState);

    return {children};
};


export const useTodoDispatch = () => {
  const dispatch = useContext(TodoActionContext);
  if (!dispatch) {
    throw new Error('useTodoDispatch must be used within a TodoActionProvider');
  }
  return dispatch;
};

// todoReducer.js
export const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

// 使用例
import { useTodoState, TodoStateProvider } from './TodoStateContext';
import { useTodoDispatch, TodoActionProvider } from './TodoActionContext';

function TodoList() {
  const state = useTodoState();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
          
        
      ))}
    
  );
}

function TodoActions({ todo }) {
  const dispatch = useTodoDispatch();

  return (
    <>
       dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
       dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
    
  );
}

function AddTodo() {
  const dispatch = useTodoDispatch();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}


function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

この分離により、コンポーネントは必要なコンテキストのみを購読できるようになり、不要な再レンダリングが削減されます。また、reducerと各コンポーネントを独立して単体テストすることが容易になります。さらに、プロバイダーのラップ順序も重要です。ActionProviderはStateProviderをラップする必要があります。

ベストプラクティスと考慮事項

• コンテキストがすべての状態管理ライブラリを置き換えるわけではない: 非常に大規模で複雑なアプリケーションでは、ReduxやZustandのような専用の状態管理ライブラリの方が依然として良い選択である場合があります。
• コンテキストの使いすぎを避ける: すべての状態をコンテキストに入れる必要はありません。真にグローバルまたは広く共有される状態に対して、慎重にコンテキストを使用してください。
• パフォーマンステスト: 特に頻繁に更新される状態を扱う場合は、常にコンテキストの使用がパフォーマンスに与える影響を測定してください。
• コード分割: Context APIを使用する際は、アプリケーションをより小さなチャンクにコード分割することを検討してください。これは、状態の小さな変更がアプリケーションの大部分を再レンダリングさせる場合に特に重要です。

結論

React Context APIは、状態管理のための多機能なツールです。これらの高度なパターンを理解し適用することで、複雑な状態を効果的に管理し、パフォーマンスを最適化し、より保守しやすくスケーラブルなReactアプリケーションを構築できます。特定のニーズに適した正しいパターンを選択し、コンテキストの使用がパフォーマンスに与える影響を慎重に考慮することを忘れないでください。

Reactが進化するにつれて、Context APIを取り巻くベストプラクティスも進化していきます。新しい技術やライブラリについて常に情報を得ることで、現代のウェブ開発における状態管理の課題に対応できるようになります。さらにきめ細かいリアクティビティを実現するために、シグナルとコンテキストを組み合わせるような新しいパターンを探求することも検討してください。