Reace Hooks その⑤

コンポーネントのアンマウントとは？

コンポーネントのアンマウントとは「コンポーネントが画面から削除されること」です。

コンポーネントが再レンダリング（マウント）されるということはその都度削除され、更新されているということです。

クリーンアップ処理

クリーンアップ処理（cleanup）とは、コンポーネントが削除（アンマウント）されたときに実行される処理 のことです。

どういったときに使うのか、実際にコードを書いて確認していきます。

app/components/scrollTracker.js

"use client";

import { useState, useEffect } from "react";

function ScrollTracker() {
    const [scrollY, setScrollY] = useState(0);

    useEffect(() => {
        const handleScroll = () => {
            setScrollY(window.scrollY);
        };

        window.addEventListener("scroll", handleScroll);
        console.log("🎯 スクロールイベントリスナーを登録しました！");

        // ✅ クリーンアップ処理
        return () => {
            window.removeEventListener("scroll", handleScroll);
            console.log("🧹 スクロールイベントリスナーを削除しました！");
        };
    }, []); // ✅ 初回マウント時のみ実行

    return (
        <div style={{ height: "200vh", padding: "20px" }}>
            <p>スクロール位置: {scrollY}px</p>
        </div>
    );
}
export default ScrollTracker;

page.js

import ScrollTracker from "./components/scrollTracker";

<ScrollTracker />

下図のようにスクロール位置を表示するコンポーネントです。

特筆すべきは下記コードです。

window.addEventListener("scroll", handleScroll);

window.removeEventListener("scroll", handleScroll);

スクロールイベントを発火させるイベントリスナーとその削除です。

こういったイベントリスナーを記述する際はuseEffect内に処理を記述し、且つクリーンアップ処理でイベントリスナーを削除するのがReactの作法となります。

このようにクリーンアップ処理を記述しないと、

• コンポーネントが削除されても、イベントリスナーが残り続ける
• メモリリークが発生し、不要な setState が実行される可能性がある

という事象が置きます。イベントリスナーを記述するときはuseEffect内でクリーンアップ処理をする。

という風に覚えておきましょう。