Next.jsでのuseEffectの使用方法と注意点

Next.jsでのuseEffectの使用方法

useEffectはReactのHookの一つで、コンポーネントのライフサイクルに関連した副作用（データの取得、手動なDOMの操作、subscriptions、タイマーの設定など）を実行するために使用されます。

基本的な使用方法

import { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('Component has mounted!');
    return () => {
      console.log('Component will unmount!');
    };
  }, []);


  return <div>Hello, Next.js!</div>;
}

上記の例では、useEffect内のコードはコンポーネントがマウントされた後に一度だけ実行されます。また、returnされた関数はコンポーネントがアンマウントされる前に実行されます。

依存配列に変数を追加する

useEffectの第二引数として空の配列[]を渡すと、コンポーネントがマウントされたときに一度だけ実行されます。この配列に変数を追加すると、その変数の値が変更されたときにuseEffect内のコードが実行されます。

import { useEffect, useState } from 'react';


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


  useEffect(() => {
    console.log('Count has changed!', count);
  }, [count]);


  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

この例では、countの値が変わるたびにuseEffect内のコードが実行されます。

注意点

1. useEffectの中で非同期関数を使用する場合、直接asyncを使わずに、非同期関数を定義してから呼び出すことを推奨されています。
2. useEffectはサーバーサイドレンダリング(SSR)では実行されないため、Next.jsのgetServerSidePropsやgetStaticPropsでのデータ取得を検討することも必要です。

以上が、Next.jsでのuseEffectの基本的な使用方法と注意点です。