Component state leakage

[slmgc]

I found an issue with the state of a component in preact, for example:

render(
    <Parent>
        <Child />
    </Parent>,
    document.body
)

class Parent extends Component {
     componentDidMount() {
          this.setState({FUBAR: true})
     }

     render() {
         return this.props.children
     }
}

class Child extends Component {
     render() {
         console.log(this.state) // <-- {FUBAR: true}, not undefined or {}
         return null
     }
}

As you can see, Parent leaks its state to Child because the default state object is reused across all components.

[developit]

Seems crazy this didn't come up before - maybe it's a regression? What version of preact by the way?

[slmgc]

"preact": "7.0.3",
"preact-compat": "3.9.2",

[slmgc]

I was able to reproduce it with preact@6.4.0. Checked in two different applications. Switching to React fixes the issue:

console.log(this.state) // <-- null

I think the reason why it didn't come up earlier was the missing state initialization, because you usually initialize the state in the constructor or in the class property:

class Parent extends Component {
    state = {} // <-- it works fine, because the default state object is replaced

    componentDidMount() {
         this.setState({FUBAR: true})
    }

     render() {
         return this.props.children
     }
}

class Child extends Component {
     render() {
         console.log(this.state) // <-- ok, returns {}
         return null
     }
}

P.S. btw, I'm not sure if it's ok to return {} (compatibility-wise), because React returns null.

[developit]

Is it possible this is related to preact-compat? Which Component class is that?

[slmgc]

Hm, it could be, I'm using preact-compat, so it's React.Component in my app.

[developit]

Ah ok I will scour that repo for a cause.

[slmgc]

Do you need a repo to reproduce this issue?

[developit]

I'm using this: https://jsfiddle.net/developit/rojcvahn/

[developit]

Can confirm, this only happens in preact-compat.

[ritz078]

Same problem here. Surely a preact-compat issue. And its going right into 2nd level 😄 In my case case its getting trasferred to a new page.

[developit]

Alright, let's prioritize this then, it's just too strange to leave open.

[ritz078]

working great 👍