React-native-router-flux: ComponentWillMount and componentWillUnmount not called if time is extremely short between Actions.push and Actions.pop

[leonardgithub]

Version

Tell us which versions you are using:

"react": "15.4.1",
"react-native": "0.39.2",
"react-native-router-flux": "3.36.0",

Expected behaviour

componentWIllMount and componentWillUnmount can be called

Actual behaviour

componentWIllMount and componentWillUnmount not called

Steps to reproduce

1. now at Route A
2. push to B (B with parameter x)
3. pop back to A
4. push to B (B with parameter y) immediately: componentWIllMount and componentWillUnmount of component B are not called due to the extremely short time

note: data are fetched from server by the parameter in the componentWIllMount, if componentWIllMount is not called, it would cause wrong data at route B.

[tonilopezmr]

@aksonov Yes same in version 3.37.0.

If you have a list with items, when fast clicks to details after Actions.pop doesn't call componentWillMount

[leonardgithub]

@aksonov Can you check this?

[swiftmade]

The problem persists in version 3.38.0

[yreenchan]

Is there any methods to solve this problem ?

[alfian0]

Up, I got same problem ...is that just happen on 3.38.0 ?

[bilby91]

Same problem here.

[twksos]

We have a temporary solution.
In our project, we have an init method for each component to set the state of that component.
It will be called in both componentWillMount and componentWillReceiveProps.

[leonardgithub]

@twksos My solution is similar to you.

[kuranari]

This may be related to https://github.com/aksonov/react-native-router-flux/issues/1266

[golestanirad]

@twksos could you please explain it more? I really appreciate it.

[twksos]

@golestanirad
I think the problem has gone if you upgrade to 4.0.
However, if there's some reason prevent you from upgrade, the old solution would looks like this:

class SomeView extends Component {
    componentWillMount() {
        this.init();
    }
    componentWillReceiveProps(nextProps) {
        this.init();
    }
    init() {
        // read props, set state, init view model ...
    }
    render() {
        // ...
    }
}