When we render some nodes conditionally(ex. {expanded && <>...</>}), HTML element leaves detached DOM, but React Components doesn’t.
Example
e.g.
...
return <>
...
{expanded && <div id="inlined">Foo</div>
</>
If the expanded state goes false -> true -> false, the elements in right side will be inserted and removed from DOM.
After that, <div id="inlined">Foo</div> left as detached DOM.
But, when I make them as seperated component:
function Foo() {
return <div id="seperated">Foo</div>
}
and, doing something like previous one but using <Foo /> component instead of inline HTML element:
...
return <>
...
{expanded && <Foo />
</>
It does not leave detached DOM.
this is detached DOM snapshot from Chrom DevTools
And I wonder that..
What’s difference between using inline <div>(or other HTML elements) and wrapping/seperating into a component?
I would like to know the exact explanation for this phenomenon.
More Examples with CodeSandbox you can see
Visit https://q4g5mg.csb.app/ , click the button twice, to expand/collapse, and then make a snapshot
Full code of example is below:
import { useState } from "react";
import "./App.css";
const dummyArrays = Array.from({ length: 100 });
const Dummy = () => {
return (
<ul>
{dummyArrays.map((_, index) => (
<li key={index}>{index}</li>
))}
</ul>
);
};
function WowList() {
return (
<ul id="wow-list">
<li>WOW</li>
<li>WOW</li>
<li>WOW</li>
<li>WOW</li>
<li>WOW</li>
</ul>
);
}
export default function App() {
const [expanded, setExpanded] = useState(false);
return (
<>
<button
onClick={() => {
setExpanded((prev) => !prev);
}}
>
{expanded ? "close" : "open"}
</button>
{expanded && (
<>
<div id="this-dummy-remains-detached-dom">
<Dummy />
</div>
<div id="this-div-also-remains-attached-dom">
<p>Detached DOM Elements problem test</p>
</div>
<WowList />
</>
)}
</>
);
}
^ Snapshot: before expand/collapse
^ Snapshot: after expand/collapse
<WowList /> does not remained detached DOM, but the rest of them (under the <div>, regardless of whether it’s an HTML element or component)
Waiting for a clear answer to this. Thanks!
