ReactにおけるControl Propsパターン

導入

ReactにおけるControl Propsパターンは、コンポーネントの状態管理に対する戦略的なアプローチであり、制御されたコンポーネントの概念をさらに発展させたものです。

これは、コンポーネント内での状態の管理方法を柔軟に決定するメカニズムを提供します。

このパターンを理解するには、まず制御されたコンポーネントについて理解する必要があります。

---

Control Propsパターンを使用したトグルボタン

ここでは、Control Propsパターンを使用したトグルボタンのTypeScriptによる実装例を示します。

import React, { useState } from 'react';

// ToggleProps型定義
interface ToggleProps {
  on?: boolean; // 外部から制御される状態
  onToggle?: (state: boolean) => void; // 状態変更時のコールバック
}

const Toggle: React.FC<ToggleProps> = ({ on, onToggle }) => {
  const [isOn, setIsOn] = useState<boolean>(false);

  const handleToggle = () => {
    const nextState = on === undefined ? !isOn : on;
    if (on === undefined) {
      setIsOn(nextState); // 内部状態を更新
    }
    if (onToggle) {
      onToggle(nextState); // 親コンポーネントに状態変更を通知
    }
  };

  return (
    <button onClick={handleToggle}>
      {(on !== undefined ? on : isOn) ? 'オン' : 'オフ'}
    </button>
  );
};

export default Toggle;

Control Propsパターンの利用

import React, { useState } from 'react';
import Toggle from './Toggle';

const App: React.FC = () => {
  const [isToggleOn, setIsToggleOn] = useState<boolean>(false);

  return (
    <div>
      <Toggle
        on={isToggleOn}
        onToggle={(state) => setIsToggleOn(state)}
      />
      <p>トグルの状態: {isToggleOn ? 'オン' : 'オフ'}</p>
    </div>
  );
};

export default App;

この例では、Toggleコンポーネントは外部からのonプロパティによって制御されることも、内部の状態isOnによって自律的に動作することもできます。

onプロパティが提供されている場合、コンポーネントは制御モードで動作し、そうでない場合は内部状態にフォールバックします。

onToggleプロパティは、状態変更時に親コンポーネントが反応できるようにするコールバック関数です。

まとめ

Control Propsパターンは、コンポーネントの柔軟性を高め、制御されたモードと非制御モードの両方の操作を可能にします。

これにより、必要に応じて親が管理を行いつつ、明示的に制御されていない場合はコンポーネントが自身の状態を自律的に管理できるようになります。