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 1 year 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

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.

rschristian avatar Feb 17 '24 01:02 rschristian