return wrong componentDidMount function in mixins.real

[kudinov-k]

mobx-react/src/utils/utils.js

Line 29 in b961d0b

return target[mobxMixins][methodName]

I have 2 components (A, B) both have method componentDidMount. When A.render() is complete then runs B.componentDidMount() instead A.componentDidMount(), even I have only component A on page

[mweststrate]

cc @xaviergonz

[xaviergonz]

I'm sorry but I don't quite get what you mean, could you share a piece of code or something?
Also, what's the error you get?

[xaviergonz]

I just tried this unit test and it was ok (assuming this is what you meant)

it("componentDidMount should be different between components", async () => {
    async function test(withObserver) {
        const events = []

        class A extends React.Component {
            componentDidMount() {
                this.didMount = "A"
                events.push("mountA")
            }

            componentWillUnmount() {
                this.willUnmount = "A"
                events.push("unmountA")
            }

            render() {
                return null
            }
        }

        class B extends React.Component {
            componentDidMount() {
                this.didMount = "B"
                events.push("mountB")
            }

            componentWillUnmount() {
                this.willUnmount = "B"
                events.push("unmountB")
            }

            render() {
                return null
            }
        }

        if (withObserver) {
            A = observer(A)
            B = observer(B)
        }

        const aRef = React.createRef()
        await asyncReactDOMRender(<A ref={aRef} />, testRoot)
        const caRef = aRef.current

        expect(caRef.didMount).toBe("A")
        expect(caRef.willUnmount).toBeUndefined()
        expect(events).toEqual(["mountA"])

        const bRef = React.createRef()
        await asyncReactDOMRender(<B ref={bRef} />, testRoot)
        const cbRef = bRef.current

        expect(caRef.didMount).toBe("A")
        expect(caRef.willUnmount).toBe("A")

        expect(cbRef.didMount).toBe("B")
        expect(cbRef.willUnmount).toBeUndefined()
        expect(events).toEqual(["mountA", "unmountA", "mountB"])

        await asyncReactDOMRender(null, testRoot)

        expect(caRef.didMount).toBe("A")
        expect(caRef.willUnmount).toBe("A")

        expect(cbRef.didMount).toBe("B")
        expect(cbRef.willUnmount).toBe("B")
        expect(events).toEqual(["mountA", "unmountA", "mountB", "unmountB"])
    }

    await test(true)
    await test(false)
})

[kudinov-k]

I have a base class A and 3 classes (B, C, D) extended of A. A extends of React.component. B C D - 3 pages of App and they have componentDidMount. When component B renders, after that triggers C.componentDidMount. If I remove this one, than trigers D.componentDidMount and if remove it, only then will be triggered B.componentDidMount. All 4 classes has @observer annotaion. I hope it's more clearly)

[xaviergonz]

Made a unit test and a PR, hopefully that should fix it

[skiritsis]

We face the same issue as @kudinov-k. Reverting back to "5.2.8" seems to fix it.

[kricore]

+1 this patch did the trick. Thanks :)

[mweststrate]

@skiritsis on what version?

[skiritsis]

@mweststrate We updated today to version 5.3.4 and just noticed it. So reverting back to the previous version we had(5.2.8) works as expected. This seems like a regression issue between those 2 versions. Let me know if you need any repro examples.

[xaviergonz]

@mweststrate there's a fix on a pr pending :)

[mweststrate]

Released as 5.3.5!