How to handle async request side effects in a react component

Question

I have an async api call with mobx which set success or failure prop depending upon server response. If success I have to navigate to different screen/route, otherwise show error.

I can show error message without any issue. But while try to navigate or push to different route, within render function, I get this warning

Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Which component lifecycle function would be suitable for my case?

 render() {
console.log(this.props);
const navigation = this.props.navigation;
const { sendOTPRequest } = this.props.store.userStore;
if (sendOTPRequest.state === "succeeded") {
  //if succeeded
  navigation.navigate("VerifyOTP");
  return null;
}
return (
  <View style={styles.container}>
    <View style={styles.formHeader}>
      <Image
        source={Logo}
        style={{
          height: 120,
          resizeMode: "contain",
          marginBottom: 5,
          display: "flex"
        }}
      />
      <Text style={styles.body}> Eat. Stamp. Reward.</Text>
    </View>
    <Formik
      initialValues={{
        phone: ""
      }}
      onSubmit={values => {
        this.sendOTP(values.phone);
      }}
      validate={values => {
        let errors = {};

        if (values.phone.length < 1) {
          errors.phone = "Invalid phone number";
        }

        return errors;
      }}
    >
      {({
        handleChange,
        handleSubmit,
        setFieldTouched,
        values,
        errors,
        touched
      }) => (
        <View style={styles.formBody}>
          <Text style={styles.headline}>Get authenticate your account</Text>
          <FormInput
            onChange={handleChange("phone")}
            value={values.phone}
            placeholder="Enter your phone number"
            keyboardType="phone-pad"
            onBlur={() => {
              setFieldTouched("phone");
            }}
          />
          <FormButton
            onClickHandler={handleSubmit}
            buttonText="Send OTP"
            isDisabled={
              values.phone.length < 1 ||
              sendOTPRequest.state === "requested"
            }
          />

          {touched.phone && errors.phone ? (
            <Text style={styles.body}> {errors.phone} </Text>
          ) : null}

          {sendOTPRequest.state === "failed" ? (
            <Text style={styles.body}> {sendOTPRequest.error_code} </Text>
          ) : null}
        </View>
      )}
    </Formik>
    <View style={styles.formFooter}>
      <View style={styles.indicatorContainer}>
        <View style={styles.indicator} />
        <View style={styles.indicatorActive} />
      </View>
    </View>
  </View>
);

}

Answer 1

Try removing navigation code from render function and add it to componentWillReceiveProps(nextProps). Check below code

   componentWillReceiveProps(nextProps) {
const navigation = this.props.navigation;
const { sendOTPRequest } = this.nextProps.store.userStore;
if (sendOTPRequest.state === "succeeded") {
  //if succeeded
  navigation.navigate("VerifyOTP");
} 
}

And your render method will be

render() {
console.log(this.props);
const navigation = this.props.navigation;
const { sendOTPRequest } = this.props.store.userStore;
if (sendOTPRequest.state === "succeeded") {
  return null;
}
return (
  <View style={styles.container}>
    <View style={styles.formHeader}>
      <Image
        source={Logo}
        style={{
          height: 120,
          resizeMode: "contain",
          marginBottom: 5,
          display: "flex"
        }}
      />
      <Text style={styles.body}> Eat. Stamp. Reward.</Text>
    </View>
    <Formik
      initialValues={{
        phone: ""
      }}
      onSubmit={values => {
        this.sendOTP(values.phone);
      }}
      validate={values => {
        let errors = {};

        if (values.phone.length < 1) {
          errors.phone = "Invalid phone number";
        }

        return errors;
      }}
    >
      {({
        handleChange,
        handleSubmit,
        setFieldTouched,
        values,
        errors,
        touched
      }) => (
        <View style={styles.formBody}>
          <Text style={styles.headline}>Get authenticate your account</Text>
          <FormInput
            onChange={handleChange("phone")}
            value={values.phone}
            placeholder="Enter your phone number"
            keyboardType="phone-pad"
            onBlur={() => {
              setFieldTouched("phone");
            }}
          />
          <FormButton
            onClickHandler={handleSubmit}
            buttonText="Send OTP"
            isDisabled={
              values.phone.length < 1 ||
              sendOTPRequest.state === "requested"
            }
          />

          {touched.phone && errors.phone ? (
            <Text style={styles.body}> {errors.phone} </Text>
          ) : null}

          {sendOTPRequest.state === "failed" ? (
            <Text style={styles.body}> {sendOTPRequest.error_code} </Text>
          ) : null}
        </View>
      )}
    </Formik>
    <View style={styles.formFooter}>
      <View style={styles.indicatorContainer}>
        <View style={styles.indicator} />
        <View style={styles.indicatorActive} />
      </View>
    </View>
  </View>
);
}