[今さら始める React マスター #5] useEffectとコンポーネントの副作用

useEffectとは？

useEffect は、Reactコンポーネントの描画後に実行したい処理を書くためのHookです。

たとえば次のような処理に使います。

• APIからデータを取得する
• タイマーを開始する
• ブラウザのタイトルを変える
• イベントリスナーを登録する

基本形

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("画面に表示されました");
  }, []);

  return <h1>Hello</h1>;
}

第二引数の [] は依存配列です。空配列の場合、初回表示時に一度だけ実行されます。

Stateが変わったときに実行する

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

依存配列に count を入れると、count が変わるたびに処理が実行されます。

クリーンアップ

タイマーやイベントリスナーを使う場合は、後片付けが必要です。

useEffect(() => {
  const id = setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => clearInterval(id);
}, []);

return した関数がクリーンアップ処理になります。

学習のポイント

useEffect は便利ですが、何でも入れる場所ではありません。まずは「画面に表示された後に外部とやり取りする処理」と考えると理解しやすいです。