状態と props を同期させる: React コンポーネントで props から状態を初期化

2024-04-02

React コンポーネントで props から状態を初期化する

コンポーネントが最初にレンダリングされる際、状態を初期化する必要があります。状態を初期化する方法はいくつかありますが、props から初期化する方法はよく使われます。

props から状態を初期化する利点

props から初期化することで、コンポーネントを再利用しやすくなります。
コンポーネントの状態が常に props と一致するため、コードが読みやすくなります。

props から状態を初期化する例

const MyComponent = (props) => {
  const [state, setState] = useState({
    count: props.initialCount,
  });

  return (
    <div>
      <h1>カウント: {state.count}</h1>
      <button onClick={() => setState({ count: state.count + 1 })}>
        カウントを増やす
      </button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent initialCount={10} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

この例では、MyComponent コンポーネントは initialCount という props を受け取ります。そして、useState フックを使って count という状態を初期化します。count の初期値は initialCount の値になります。

count の値を増やすボタンをクリックすると、setState フックを使って count の値を更新します。

その他の注意点

props から状態を初期化する場合は、useState フックの第二引数に props の値を渡す必要があります。
props の値が変更される可能性がある場合は、useEffect フックを使って props の変更を監視し、必要に応じて状態を更新する必要があります。

const MyComponent = (props) => {
  const [count, setCount] = useState(props.initialCount);

  useEffect(() => {
    // props.initialCount が変更されたら、状態を更新する
    setCount(props.initialCount);
  }, [props.initialCount]);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        カウントを増やす
      </button>
    </div>
  );
};

const App = () => {
  const [initialCount, setInitialCount] = useState(10);

  return (
    <div>
      <MyComponent initialCount={initialCount} />
      <button onClick={() => setInitialCount(initialCount + 1)}>
        初期カウントを増やす
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

また、useEffect フックを使って initialCount の変更を監視し、必要に応じて count の値を更新しています。

解説

useState フックを使って、count という状態を初期化しています。

このサンプルコードは、React コンポーネントで props から状態を初期化する方法を示しています。この方法を使うことで、コンポーネントを再利用しやすくなり、コードが読みやすくなります。

props から状態を初期化する他の方法

コンストラクタを使う

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: props.initialCount,
    };
  }

  render() {
    return (
      <div>
        <h1>カウント: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          カウントを増やす
        </button>
      </div>
    );
  }
}

この方法では、コンストラクタで state オブジェクトを初期化します。

デフォルトプロパティを使う

const MyComponent = (props) => {
  const { initialCount = 0 } = props;

  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        カウントを増やす
      </button>
    </div>
  );
};

この方法では、デフォルトプロパティを使って initialCount のデフォルト値を指定します。

getDerivedStateFromPropsを使う

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.initialCount !== state.count) {
      return {
        count: props.initialCount,
      };
    }

    return null;
  }

  render() {
    return (
      <div>
        <h1>カウント: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          カウントを増やす
        </button>
      </div>
    );
  }
}