Reactのライフサイクルの基本を理解しよう

この記事の最終更新日: 2023年11月23日

Reactは、その効率的なUI更新とコードの再利用可能性で人気のJavaScriptライブラリです。この記事では、Reactのコンポーネントライフサイクルの基本について説明します。ライフサイクルメソッドを理解することで、より効果的なコンポーネントを作成できます。

ライフサイクルメソッドとは？
ライフサイクルの利用例

ライフサイクルメソッドとは？

Reactのクラスコンポーネントは、そのライフサイクルに沿って様々なメソッドを持っています。これらのメソッドは、コンポーネントがマウントされたり、更新されたり、アンマウントされる際に自動的に呼ばれます。

マウント時のライフサイクル

constructor(props): コンポーネントがインスタンス化されるときに一度呼ばれます。初期状態の設定に使います。
static getDerivedStateFromProps(props, state): コンポーネントがマウントされる前、またはpropsが変更されたときに呼ばれます。
render(): UIをレンダリングするためのメソッドです。
componentDidMount(): コンポーネントがDOMにマウントされた後に呼ばれます。データフェッチングやDOMの操作に使われます。

更新時のライフサイクル

static getDerivedStateFromProps(props, state): コンポーネントが新しいpropsを受け取るたびに呼ばれます。
shouldComponentUpdate(nextProps, nextState): パフォーマンス最適化のために、レンダリングをスキップするかどうかを決めるために使います。
render()
getSnapshotBeforeUpdate(prevProps, prevState): 最新のレンダー出力がDOMに適用される前に呼ばれます。
componentDidUpdate(prevProps, prevState, snapshot): コンポーネントが更新された後に呼ばれます。

アンマウント時のライフサイクル

componentWillUnmount(): コンポーネントがアンマウントされるときに呼ばれ、クリーンアップ（イベントハンドラの削除など）に使用されます。

ライフサイクルの利用例

ここで、シンプルなカウンターコンポーネントを例に取り、ライフサイクルメソッドの利用方法を見ていきましょう。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component did mount!');
  }

  componentDidUpdate() {
    console.log('Component did update!');
  }

  componentWillUnmount() {
    console.log('Component will unmount!');
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

この例では、componentDidMount、componentDidUpdate、componentWillUnmountメソッドを使って、コンポーネントのライフサイクルの異なる段階でコンソールにメッセージを表示しています。