useEffectのクリーンアップ関数について

Question

下記のような簡単なコンポーネントを用意しました.

import React, { useState, useEffect, useMemo } from "react";

export const Lesson = (props: any) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("useEffect1");
    return () => console.log("clean up");
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <>
      {console.log("render")}
      <p>{count}</p>
      <button onClick={handleClick}>plus1</button>
    </>
  );
};

ここでまず最初にレンダリングされるとrender => useEffect1の順でコンソールに出力されます.
次にplus1を押すとrender => clean up => useEffect1の順になります.
ここでわからないのでが, returnにクリーンアップ関数を指定するとcomponentWillUnmountと同じことが実現できると思うのでクリックされcount情報が更新され<p>{count}</p>がUnmountされます.そしてクリーンアップ関数が呼ばれうると思うのでこのような順番にならないと思うのですが,なぜこのような順番になるのかわかりません.
ご教授の方をよろしくお願いします.

Answer 1

useEffectでcomponentWilUnmountと同じ挙動を実現させる場合は、第二引数に空配列[]を渡す必要があります。

useEffect(() => {
  console.log("didMount")
  return () => { console.log("willUnmount"); }
}, []);

Answer 2

returnにクリーンアップ関数を指定するとcomponentWillUnmountと同じことが実現できると思うので

違います。返り値に渡した関数は、第2引数で渡した配列（ここでは[count]）の中身が変化するたびに実行されます。