ReactのuseEffectフックの使い方

Reactでは、コンポーネントのライフサイクルや状態の変化に応じて特定の処理を実行するために、useEffectフックが提供されています。useEffectは、コンポーネントがレンダリングされた後に副作用を実行するために使用されます。ここでは、useEffectの使い方といくつかのコード例を紹介します。

基本的な使い方:

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // 副作用のコードをここに記述する
    console.log('コンポーネントがレンダリングされました');
  });
  return <div>My Component</div>;
}

上記の例では、useEffectフック内でコンソールにメッセージを出力しています。このコードは、コンポーネントが初めてレンダリングされた後に実行されます。

特定の状態の変化に反応する:

import React, { useEffect, useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`カウントの値が変更されました: ${count}`);
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上記の例では、countという状態が変化するたびにuseEffect内のコードが実行されます。useEffectの第2引数には、実行をトリガーする状態の配列を指定します。

クリーンアップ処理の実行:

import React, { useEffect, useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('コンポーネントがマウントされました');
    return () => {
      console.log('コンポーネントがアンマウントされました');
    };
  }, []);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上記の例では、コンポーネントのマウント時に実行される処理と、コンポーネントのアンマウント時に実行されるクリーンアップ処理が定義されています。useEffectのコールバック関数内で返された関数は、クリーンアップ処理として実行されます。

これらはuseEffectの基本的な使い方とコード例です。useEffectはさまざまなシナリオで使用され、コンポーネントの副作用処理を制御するための強力なツールです。