React Hooks Unmountingされない。

前提・実現したいこと

テストで、挙動を確かめています。
Hooksを使って、Unmountingがされません！
mountingのコンソールは、表示されるのですが、unMountingの方は表示されません。

mounting => updating(今回は指定なし) => unMounting　の流れのはずですが、なぜmountingは実行され、unMoutingは実行されないのでしょうか？

該当のソースコード

import { FC, useEffect } from 'react';

const Test:FC = () => {
  useEffect(() => {
    console.log('mounting');
    return () => console.log('unMounting');
  },[])
  return (
    <>
    </>
  )
}

export default Test;

maisumakun

2021/03/22 02:38

どのようなタイミングでアンマウントが行われることを想定していましたか？

Patao150205

2021/03/22 04:45

console.log('mounting')のあとにuseEffectのreturn内で、記述したアンマウントが実行されると思ってました。

maisumakun

2021/03/22 04:47

コンポーネント自体をアンマウントする仕掛けなどは用意していますか？

Patao150205

2021/03/22 08:44

してなかったです。そもそも使い方のイメージができていませんでした。疑問は解決されました！ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

unmount するための仕掛け。

js
1function App() {
2  const [mount, setMount] = useState(false);
3
4  return (
5    <>
6      <input type='checkbox' checked={mount} onChange={() => setMount(!mount)} />
7      {mount && <Test />}
8    </>
9  );
10}