React HooksでcomponentDidMountを実装

React Function/Hooks ComponentにおけるcomponentDidMount相当

React Function/Hooks ComponentsにおけるcomponentDidMount相当の処理は、useEffectフックを使用して実装されます。

useEffectフックの使い方

useEffectフックは、コンポーネントがレンダリングされた後に実行される処理を定義するために使用されます。componentDidMount相当の処理を実装するには、以下の方法を使用します。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // componentDidMountの処理をここに記述
    console.log('Component mounted!');

    // cleanup処理が必要な場合は、返り値で関数を定義
    return () => {
      console.log('Component unmounted!');
      // cleanup処理をここに記述
    };
  }, []);
}

依存配列の空配列

useEffectフックの第2引数に空配列を渡すことで、コンポーネントが最初にマウントされたときだけ効果が実行されるようになります。これにより、componentDidMount相当の挙動を実現します。

cleanup処理

React HooksでcomponentDidMountを実装するコード例

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // componentDidMountの処理をここに記述
    console.log('Component mounted!');

    // cleanup処理が必要な場合は、返り値で関数を定義
    return () => {
      console.log('Component unmounted!');
      // cleanup処理をここに記述
    };
  }, []);
}

依存配列が空配列の場合

useLayoutEffectフック

• しかし、パフォーマンスへの影響が大きくなる可能性があるため、慎重に使用してください。
• componentDidMountと似ていますが、ブラウザのペイント処理の前に実行されるため、DOMの変更が即座に反映されます。
• useLayoutEffectフックは、レンダリングのレイアウトフェーズの直後に実行されます。

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // componentDidMountの処理をここに記述
  }, []);

  return (
    // ...
  );
}

useRefフックと副作用関数

• この方法では、useEffectフックの代わりに、副作用関数を直接呼び出すことができます。
• useRefフックを使用して、コンポーネントの初回レンダリング時に実行される副作用関数を定義することもできます。

import { useRef } from 'react';

function MyComponent() {
  const mountedRef = useRef(false);

  if (!mountedRef.current) {
    mountedRef.current = true;
    // componentDidMountの処理をここに記述
  }

  return (
    // ...
  );
}

カスタムフック

• これにより、コードの再利用性を向上させることができます。
• カスタムフックを作成して、componentDidMount相当の処理を抽象化することもできます。

import { useEffect } from 'react';

function useDidMount() {
  useEffect(() => {
    // componentDidMountの処理をここに記述
  }, []);
}

function MyComponent() {
  useDidMount();

  return (
    // ...
  );
}

条件付きレンダリング

• ただし、この方法は複雑になる可能性があるため、適切に使用してください。
• 条件付きレンダリングを使用して、コンポーネントの初回レンダリング時にのみ特定の処理を実行することもできます。

function MyComponent() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  // componentDidMountの処理をここに記述

  return (
    // ...
  );
}