delay back and refresh the current scene can lead to infinite loop.

[ekoooo]

Version

• react-native-router-flux v4.0.0-beta.31
• react-native v0.55.4

Expected behaviour

page1 componentWillReceiveProps called once when page2 pop to page1.

Actual behaviour

page1 componentWillReceiveProps infinite loop when page2 pop to page1.

Steps to reproduce

1. git clone https://github.com/ekoooo/TestRouterFlux.git.
2. run App.
3. page1 -> page2 -> page1.
4. infinite loop.

logs

page2 componentWillMount
page2 componentWillUnmount
page1 componentWillReceiveProps
page2 componentWillMount
page2 componentWillUnmount
page1 componentWillReceiveProps
page2 componentWillMount
page2 componentWillUnmount
page1 componentWillReceiveProps
page2 componentWillMount
page2 componentWillUnmount
page1 componentWillReceiveProps
page2 componentWillMount
page2 componentWillUnmount
page1 componentWillReceiveProps
page2 componentWillMount
page2 componentWillUnmount
...
...
...

Code

page1

import React, { Component } from 'react';
import {
    Text,
    View,
    TouchableOpacity,
} from 'react-native';
import { Actions } from 'react-native-router-flux';

export default class Page1 extends Component {
    constructor(props) {
        super(props);
     
        this.state = {

        };
    }

    componentWillReceiveProps(newProps) {
        console.log('page1 componentWillReceiveProps');
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <TouchableOpacity onPress={() => { Actions.page2() }}>
                    <Text>go page2</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

page2

import React, { Component } from 'react';
import {
    Text,
    View,
    YellowBox,
    TouchableOpacity,
} from 'react-native';
import { Actions } from 'react-native-router-flux';

YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

export default class Page1 extends Component {
    constructor(props) {
        super(props);

        this.state = {};

        this.timer = null;

        this._delayGoback = this._delayGoback.bind(this);
    }

    componentWillMount() {
        console.log('page2 componentWillMount');

        Actions.refresh({
            rightTitle: "comfirm",
            onRight: () => {

            },
        })
    }

    componentWillUnmount() {
        console.log('page2 componentWillUnmount');

        this.timer && clearTimeout(this.timer);
    }

    _delayGoback() {
        this.timer = setTimeout(() => {
            Actions.pop({
                refresh: {
                    updateList: true,
                    d: +new Date(),
                }
            });
        }, 200);
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <TouchableOpacity onPress={() => { this._delayGoback() }}>
                    <Text>pop</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

[aksonov]

You need to use setTimeout to defer nav action