preact
preact copied to clipboard
"Components keep being added when updating state" issue persists when using tags other than div
- [x] Check if updating to the latest Preact version resolves the issue
Thank you for addressing https://github.com/preactjs/preact/issues/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.
FWIW, the banner on the site is purely for showing the latest release (and we have a little infra bug so it's showing the fallback, hardcoded version at the moment) -- it has no connection to the version available in the REPL.