Reactコンポーネントでプロパティドリリングを避けるテクニック

作成日 2025.03.13
React
React

プロパティドリリングとは、必要なデータを深い子コンポーネントに渡す際に、親から子、さらにその子へと順にプロパティを渡していく現象を指します。このような状態を避けるための設計や実装のテクニックを解説します。

1. プロパティドリリングの問題点
2. React Context APIの活用
3. 状態管理ライブラリの導入
4. コンポーネント構造の再設計
5. HOC（高階コンポーネント）の利用
6. Render Propsの利用
7. カスタムフックの使用
8. useReducerフックの適用
9. 親子関係を避けるポータルの活用
10. 不要なリレンダリングの回避
11. イベントバスやパブリッシュ・サブスクライブモデルの利用
12. ライブラリやツールの比較と選択
13. まとめ

プロパティドリリングの問題点

コードの可読性や保守性が低下する、不要なリレンダリングが発生するなど、プロパティドリリングが引き起こす問題点を整理します。

React Context APIの活用

グローバルな状態を共有する方法として、Context APIを使用します。

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function useTheme() {
  return useContext(ThemeContext);
}

export { ThemeProvider, useTheme };

状態管理ライブラリの導入

ReduxやZustandなどのライブラリを活用して状態管理を効率化します。

コンポーネント構造の再設計

データを必要とするコンポーネントを親に近づける、またはHOCやRender Propsを活用して構造を見直します。

HOC（高階コンポーネント）の利用

高階コンポーネントを使用して、データを注入します。

function withTheme(Component) {
  return function WrappedComponent(props) {
    const { theme, setTheme } = useTheme();
    return <Component {...props} theme={theme} setTheme={setTheme} />;
  };
}

Render Propsの利用

Render Propsを使用してデータを動的に渡します。

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return children({ theme, setTheme });
}

function App() {
  return (
    <ThemeProvider>
      {({ theme, setTheme }) => (
        <div>
          <p>Current Theme: {theme}</p>
          <button onClick={() => setTheme('dark')}>Change Theme</button>
        </div>
      )}
    </ThemeProvider>
  );
}

カスタムフックの使用

カスタムフックを作成して再利用性を高めます。

function useUser() {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  return { user, login };
}

useReducerフックの適用

複雑な状態管理にはuseReducerを活用します。

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}