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

useEffectとは？

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

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

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

基本形

import { useEffect } from "react";

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

  return <h1>Hello</h1>;
}

第二引数の [] は依存配列です。この例はマウント時の処理を示します。開発中にStrict Modeを使うと、動作確認のためセットアップとクリーンアップが追加で実行されることがあります。「ログが必ず一回」と数えるより、登録した処理を片付けられるかに注目しましょう（公式の説明）。

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

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

この断片は、count が定義されたコンポーネントの中に置く想定です。依存配列に count を入れると、その値の変化に合わせてタブのタイトルが変わります。前の空配列の例とは別の使い方として比べてください。

クリーンアップ

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

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

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

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

学習のポイント

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