適切なuseEffectを使用しましょう🥹

こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回はuseEffectについてお伝えしていきます。

Reactでは、適切にuseEffectを使用しなければ、パフォーマンスやバグの原因になる可能性があります。

useEffectは他の状態要素を変更するために特定の状態要素を監視することではありません。

レンダリング後に実行されるため、イベントハンドラーとは異なり、コンポーネントがレンダリングした後に実行されます。

データ取得、DOMの直接操作、特定のアクション後のクリーンアップなど、さまざまなタスクに使用されます。

下記の理由により、これらの操作をレンダリング内で直接実行することは適切ではありません。

コンポーネントの再レンダリングの頻度は制御できません。

コンポーネントは、状態の変更やプロパティの変更など、さまざまなトリガーによって再レンダリングされます。

もし、レンダリングコード内に直接配置すると、操作や副作用が再レンダリングのたびに実行されて、無限ループの原因となる可能性があります。

useEffectの主な目的

useEffectの主な目的は、Reactコンポーネントで副作用を実行するための仕組みを提供することです。

副作用とは、APIを呼び出し、データの取得や更新など、コンポーネントの外部とのやり取りをする処理のことです。

useEffectの仕組み

useEffectは、コンポーネントの画面の更新後、DOMの変更がコミットされた後に実行されます。

これにより、useEffectは常に最新の状態とプロパティにアクセスできます。

function EmptyComponent() {
  useEffect(() => {
    console.log('This line is logged second');
  });
  console.log('This line is logged first');
  return null;
}

例えば、上記のコードの場合、コンポーネントのフェーズの順序は次のようになります。

1. レンダリングがトリガーされる
2. コンポーネントがレンダリングされ、DOMと比較されます。
3. 変更はDOMにコミットされます。
4. エフェクトが実行され、コンソールに"This line is logged second"がログされます。

依存関係配列

useEffectのコールバック関数を引数として渡して、依存関係配列を指定してない場合、そのuseEffectはコンポーネントがレンダリングされるたびに実行されます。

useEffect(() => {
    console.log('Runs after every render');
});

ですが、2番目の引数として依存関係配列を指定することで、useEffectの実行のタイミングを制御できます。

下記の配列コードを実行すると、コンポーネントが最初にマウントされたときに実行されるuseEffect、および配列内の要素が変更された後の再レンダリング時に実行されるuseEffectを指定できます。

function Component() {
  const counterRef = useRef(0);

  useEffect(() => {
    console.log({ counter: counterRef.current });
  }, [counterRef.current]);

  return (
    <div>
      <button onClick={() => counterRef.current++}>
        Increment Counter
      </button>
    </div>
  );
}