useEffectで副作用を書く

導入

タイマーを動かす、外部からデータを取ってくる、タイトルを書き換える ―― こうした「描画そのもの以外の処理」を 副作用 と呼び、useEffect に書きます。

説明

1秒ごとに数える簡単なタイマーです。

function App() {
  const [seconds, setSeconds] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);
    // 後片付け（コンポーネントが消えるときにタイマーを止める）
    return () => clearInterval(timer);
  }, []); // [] は「最初の1回だけ実行」の意味

  return <h1>経過: {seconds} 秒</h1>;
}

• useEffect(() => { ... }, []) … 第2引数の依存配列が [] なので、最初の描画後に1回だけ実行されます。
• return () => {...} … effect の「後片付け」。ここでタイマーを止めないと、裏で動き続けてしまいます。
• setSeconds((s) => s + 1) … 更新関数には「前の値」を受け取る形も書けます。タイマーのような場面ではこちらが安全です。

依存配列に値を入れると、「その値が変わったときにも」実行されます（例 [count]）。

やってみよう

1000（ミリ秒）を 500 に変えると、カウントの速さがどう変わるか確かめてみましょう。