React useEffect の使い方解説

React.js での useEffect の期待される用途について日本語で解説

useEffect は、React.js の Hooks API で提供される関数で、コンポーネントのレンダリング後に副作用を実行するための仕組みです。

期待される用途

使用方法

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 副作用を実行するコード
    console.log('副作用が実行されました');
  }, []); // 依存配列は空配列なので、コンポーネントが最初にマウントされたときだけ実行されます
}

依存配列 (dependency array) について

• 依存配列に値が含まれている場合、その値が変更されると useEffect が再実行されます。
• 依存配列が空配列の場合、useEffect はコンポーネントが最初にマウントされたときだけ実行されます。
• 依存配列に含まれる値が変更された場合にのみ、useEffect が再実行されます。
• 依存配列は、useEffect が再実行されるタイミングを制御します。

具体的な例

``

import { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `クリック数: ${count}`;
  }, [count]); // count が変更されたときにだけタイトルを更新

  return (
    <div>
      <p>クリック数: {count}</p>
      <button onClick={() => setCount(count + 1)}>クリック</button>
    </div>
  );
}

この例では、useEffect を使ってクリック数に応じてページのタイトルを更新しています。count が変更されるたびに useEffect が再実行され、タイトルが更新されます。

注意点

• 依存配列の管理には注意が必要で、不要な再実行を防ぐために適切な依存配列を設定する必要があります。
• useEffect の中で非同期処理を行った場合は、cleanup 関数を使用してリソースの解放やクリーンアップ処理を行う必要があります。

React.js での useEffect の使い方解説

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 副作用を実行するコード
    console.log('副作用が実行されました');
  }, []); // 依存配列は空配列なので、コンポーネントが最初にマウントされたときだけ実行されます
}

例 1: タイトルの更新

import { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `クリック数: ${count}`;
  }, [count]); // count が変更されたときにだけタイトルを更新

  return (
    <div>
      <p>クリック数: {count}</p>
      <button onClick={() => setCount(count + 1)}>クリック</button>
    </div>
  );
}

例 2: API 呼び出し

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response    = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
    };

       fetchData();
  }, []); // コンポーネントが最初にマウントされたときだけ API 呼び出し
}

クラスコンポーネントのライフサイクルメソッド

• componentWillUnmount
  コンポーネントがアンマウントされる前に実行されます。
• componentDidUpdate
  コンポーネントが更新されたときに実行されます。

class MyComponent extends React.Component {
  componentDidMount() {
    // コンポーネントが最初にマウントされたときに実行される
  }

  componentDidUpdate(prevProps) {
    // コンポーネントが更新されたときに実行される
    if (prevProps.count !== this.props.count) {
      // プロパティが変更された場合の処理
    }
  }

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

  render() {
    // ...
  }
}

カスタムフック

• カスタムフックを作成して、共通の副作用をカプセル化することができます。

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async    () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
    };

    fetchDat   a();
  }, [url]);

  return data;
}

useLayoutEffect

• DOM 操作やブラウザのペイント処理が必要な場合に使用します。
• useEffect と似ていますが、ブラウザのレイアウト処理の後に実行されます。

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // ブラウザのレイアウト処理の後に実行される
    document.title = 'タイトルが更新されました';
  }, []);
}

useCallback と useMemo

• useMemo は、値をキャッシュして、再レンダリング時に再計算されないようにします。

import { useCallback, useMemo } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // 関数をキャッシュ
  }, []);

  const memoizedValue = useMemo(() => {
    // 値をキャッシュ
  }, [dependency]);

  return (
    <button onClick={handleClick}>クリック</button>
  );
}

選択基準

• パフォーマンス
  必要なパフォーマンスに応じて最適な方法を選択します。
• 副作用の種類
  副作用の性質に応じて適切な方法を選択します。
• コンポーネントの種類
  クラスコンポーネントか関数コンポーネントかによって選択が異なります。