preact icon indicating copy to clipboard operation
preact copied to clipboard

"Components keep being added when updating state" issue persists when using tags other than div

Open yy0931 opened this issue 5 months ago • 1 comments

  • [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.

yy0931 avatar Feb 16 '24 23:02 yy0931