Reactのクリーンアップが呼ばれない

Question

前提

以下のような実装をしています。親が子を追加でき、子供は自分自身を削除できるようなコンポーネントです

// 親コンポーネント
function Parent(props) {
  const [childList, setChildList] = useState([]);
  useEffect(() => {
    // サーバからのデータがあったらstateに設定する
    if(props.childList.length != 0){
      const list = props.childList.map((child) => {
        return createChild(child);
      });
      setChildList(list);

    }
  }, []);

  return(
    <>
      {childList}
      <button onClick={add}>Child追加</button>
    </>
  )

  function createChild(child){
    return (
      <Child
         data={child}
      />
    )
  }
・・・
}

// 子コンポーネント
function Child(props) {
  useEffect(() => {
    return () => {
      // クリーンアップ処理
      console.log('delete!')
    };
  }, []);

  return (
    <>
      <p>{props.data.name}</p>
      <button onClick={delete}>自分を削除</button>
    </>
  )
}

事象内容

サーバからデータをもらって表示した後に、子コンポーネントの削除を実行してもクリーンアップが呼ばれません。
新しく追加した子コンポーネントを削除した時はクリーンアップが呼ばれます。

※補足
クリーンアップが呼ばれない手順としては例えばホーム画面と編集画面があったとして
以下のような形になります

1．編集画面で子をいくつか作る
親
→子
→子

2．データベースに保存してホーム画面へ遷移

3．もう一度編集画面へ遷移して表示
親
→子
→子

4．子を削除。クリーンアップが起動しない。'delete!'がコンソールに表示されない
親
→子

質問事項

• クリーンアップの処理が間違っているでしょうか
• クリーンアップが呼ばれないケースは何かあるでしょうか

Answer 1

サーバからデータをもらって表示した後に、子コンポーネントの削除を実行してもクリーンアップが呼ばれません。

子コンポーネントが0個になることがないのであれば、最後に残った1つは**propだけ書き換えて転用されます**ので、破棄される機会は来ません。

どうしても破棄→再作成をさせたいのであれば、keyを付与して更新時には入れ替える、といった手法を取る必要があります。

Comments

[ton_saurus]

回答ありがとうございます。子コンポーネントのリストchildListは0個(空配列)の場合もあります。事象発生の手順例を書いてみました

[maisumakun]

Childで、onClick={delete}となっていますが、このdeleteの定義はどこでしょうか？

[ton_saurus]

ソースを読み返してみたら、クリーンアップ前に条件分岐して早期returnしていました・・・
それが原因でクリーンアップ起動しなかったみたいです。
ご対応いただきありがとうございました