Cannot update during an existing state transition (such as within `render`) in React Native

Question

Hi I have one screen where I have a condition that isProductTourCompleted if true then I am navigating to Dashboard screen. I am trying to get value of it in componentDidMount method using AsyncStorage API. I tried to update it in componentWillMount too, but no luck.

If it is true then updating the state and re-render the component and navigate to Dashboard. It opens Dashboard screen but shows this warning.

I checked few threads that has some other reasons. Can anyone hint me what I am doing wrong ?

Cannot update during an existing state transition (such as within render) in React Native

export default class FirstProductTour extends Component {
  constructor(props) {
    super(props);
    this._startDashboardScreen = this._startDashboardScreen.bind(this);

    this.state = {
      isProductTourCompleted: false
    };
  }

  componentDidMount() {
    AsyncStorage.getItem("@ProductTour:key").then(value => {
      if (value)
        this.setState({
          isProductTourCompleted: true
        });
    });
  }

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        {this.state.isProductTourCompleted
          ? this._startDashboardScreen()
          : <View style={styles.container}>
              <Image source={require("../../img/talk_people.png")} />
              <Text style={styles.centerAlignTextStyle}>
                {strings.talk_people}
              </Text>

              <RoundButton
                robotoThinStyle={styles.roundButtonStyle}
                centerAlignTextStyle={styles.whiteColorStyle}
                onPress={() => {
                  const resetAction = NavigationActions.reset({
                    index: 0,
                    actions: [
                      NavigationActions.navigate({
                        routeName: "SecondProductTour"
                      })
                    ]
                  });
                  this.props.navigation.dispatch(resetAction);
                }}
              >
                {strings.continueText}
              </RoundButton>
            </View>}
      </View>
    );
  }

  _startDashboardScreen() {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: "Dashboard"
        })
      ]
    });
    this.props.navigation.dispatch(resetAction);
  }
}

Answer 1

You need to check whether to navigate to FirstProductTour or to DashPage on a function or from a separate container.

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI.
Setting a state in componentDidMount will only trigger frequent re-renders which results in bad performance optimization. Component will re render even when the props doesnt not change.

Best Solution : Use a container component (or a function like ButtonClick) that does the criteria check and decides the navigation.

Another solution will be checking the criteria and calling the navigate function on componentwillMount. something like below

componentDidMount() {
    AsyncStorage.getItem("@ProductTour:key").then(value => {
      if (value)
       this._startDashboardScreen()
    });
  }