クラスコンポーネントのライフサイクルイベント

React

React Component には、生成されてから破棄されるまでの過程でどのような処理を行うべきかを記述するためのライフサイクルメソッドがあります。

メソッド
componentDidMountコンポーネントがマウントされたタイミングで実行されます。
shouldComponentUpdateコンポーネントの状態変化が起きた時に、コンポーネントを再描画すべきかどうかを決定します。
componentDidUpdateコンポーネントが更新された再描画後に呼び出されます。
componentWillUnmountコンポーネントがアンマウントされる前に呼び出されます。
componentDidCatchコンポーネントで例外が発生した場合に実行されます。

これらのメソッドを Component に実装することで、ライフサイクルイベントに合わせた処理を実行することができます。

import * as React from 'react';

export interface MyComponentProps {}

export interface MyComponentState {}

export class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  constructor(props: MyComponentProps) {
    super(props);

    // コンポーネントが初期化されたタイミングで実行されます。
    this.state = {};
  }

  componentDidMount(): void {
    // コンポーネントがマウントされたタイミングで実行されます。
  }

  shouldComponentUpdate(
    nextProps: Readonly<MyComponentProps>,
    nextState: Readonly<MyComponentState>,
    nextContext: any
  ): boolean {
    // コンポーネントが更新されたタイミングでコンポーネントを再描画すべきかどうかを決定します。
  }

  componentWillUnmount(): void {
    // コンポーネントがアンマウントされる前に実行されます。
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // コンポーネントで例外が発生した場合に実行されます。
  }
}

参考資料