Components keep being added when updating state

[yy0931]

• Check if updating to the latest Preact version resolves the issue

I'm having a problem where a component is repeatedly added to document.body, even though it's only used once in the component. Below is a simplified version of the code, where <B /> keeps getting added repeatedly. This issue doesn't happen with React. Am I missing something?

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>
            <div></div>
            {cond && <div></div>}
            <B />
            <div></div>
        </div>
    }
}

render(<Test />, document.body)

To Reproduce, you can copy-paste the above code to https://preactjs.com/repl to see that the text "B" is continuously added.

Expected behavior
Only a single instance of <B /> should be shown.

Edit: I've further simplified the code.

[marvinhagemeister]

With a slightly modified variant I'm able to finally reproduce #4194 .

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>
            <div></div>
            {null}
            <B />
        </div>
    }
}

render(<Test />, document.body)