"Components keep being added when updating state" issue persists when using tags other than div #4283
Description
- Check if updating to the latest Preact version resolves the issue
Thank you for addressing #4274, but the fix did not resolve the issue in my case. The code snippet I provided had been simplified to use only <div>, but I am actually using different tags. When I change <div></div> before {cond && ... } to <span></span>, the bug still persists.
import { render } from "preact"
import { useEffect, useState } from "preact/hooks"
const B = () => <div>B</div>
const Test = () => {
const [state, setState] = useState(true)
useEffect(() => {
const timer = setInterval(() => {
setState((s) => !s)
}, 250)
return () => { clearInterval(timer) }
}, [])
if (state) {
return <div>
<B />
<div></div>
</div>
} else {
const cond = false
return <div>
<span></span>
{cond && <div></div>}
<B />
<div></div>
</div>
}
}
render(<Test />, document.body)To Reproduce, copy-paste the above code to https://preactjs.com/repl to see that the text "B" is continuously added. (The site indicates "v10.19.3," but I'm assuming the REPL is using v10.19.5 because the previous bug has been fixed.)
Expected behavior
Only a single instance of <B /> should be shown.