問題一覧に戻る
中級副作用
問題40: クリーンアップ関数

returnでの後処理とメモリリークの防止を学びます。エフェクトのクリーンアップ処理を理解しましょう。

import React, { useState, useEffect } from 'react';

function Clock() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>切替</button>
      {show && <Timer />}
    </div>
  );
}

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    // タイマーを設定
    const id = setInterval(() => {
      setTime(t => t + 1);
    }, 1000);

    // コンポーネントがアンマウントされる時のクリーンアップ処理
     () => {
      // タイマーをクリアしてメモリリークを防ぐ
      clearInterval();
    };
  }, []);

  return <p>経過: {time}秒</p>;
}

export default Clock;
···