Tengo dificultades para comprender cómo funciona la reconciliación cuando se trata de componentes de reacción anidados. A continuación se muestra mi código para index.js

 import React from "react"; import { render } from "react-dom"; import { useState, useEffect } from "react"; const TodoList = ({ todos }) => { useEffect(() => { console.log("mounted List") return () => { console.log("unmounted List") } }, []) const Todo = ({ txt }) => { useEffect(() => { console.log("mounted Todo") return () => { console.log("unmounted Todo") } }, []) return ( <li> {txt} </li> ); }; return todos.map(todo => <Todo {...todo} />); }; const App = () => { const [todos, setIt] = useState([{ txt: "foo" }, { txt: "bar" }, { txt: "baz" }]) return ( <> <button onClick={() => setIt(todos.concat({ txt: 'new' }))}>Click</button> <TodoList todos={todos} /> </>) } render(<App />, document.getElementById("root"));

A continuación se muestra index.html

 <div id="root"></div>

La parte que me confunde es por qué todas las instancias de reacción se siguen desmontando y volviendo a montar cada vez que hago clic en el botón. Tengo entendido que el "tipo" de las instancias de reacción no es el mismo porque definimos el componente Todo localmente dentro del componente TodoList. Debido a esto, básicamente estamos creando un nuevo componente Todo cada vez que se vuelve a renderizar. Sin embargo, siento que mi explicación es una respuesta de muy alto nivel (Además, ni siquiera estoy seguro de si estoy en lo correcto) y no estoy seguro de los detalles de implementación de nivel inferior sobre cómo el reconciliador de reacción maneja las distinciones entre el "tipo" de instancias de reacción cuando tenemos componentes anidados frente a no anidados. (Estoy usando el término "anidado" y "no anidado" en el sentido de definir un componente de reacción dentro de otro componente de reacción como en el ejemplo que di).