title: Using getDerivedStateFromProps to fetch API data is causing the component to render many times
body: <p>I am trying to fetch some data from an API call. I am using <code>getDerivedStateFromProps</code>, <code>componentDidMount,</code>shouldComponentUpdate<code>and</code>componentDidUpdate`.</p>
  
  <p>I am doing it like this because I need <code>userToken</code> which comes from <code>userToken: store.signinScreen.userToken</code> to be there before the call of the function <code>GetPassengersData</code> which needs <code>userToken</code> to get the data from the API.</p>
  
  <p>This is the whole component:</p>
  
  <pre><code>// imports
  
  class HomeScreen extends Component {
    static navigationOptions = {
      header: null,
    };
  
    state = {
      error: false,
    };
  
    static getDerivedStateFromProps(props, state) {
      if (props.userToken !== state.userToken) {
        return { userToken: props.userToken };
      }
      return null;
    }
  
    componentDidMount() {
      this.GetPassengersData();
    }
  
    shouldComponentUpdate(prevProps, state) {
      return this.props !== prevProps;
    }
  
    componentDidUpdate(prevProps, prevState) {
      const { error } = this.state;
      if (!error) {
        this.GetPassengersData();
      }
    }
  
    GetPassengersData = async () =&gt; {
      const { passengersDataActionHandler, userToken } = this.props;
      if (userToken &amp;&amp; userToken !== null) {
        try {
          const response = await fetch(
            'http://myAPI/public/api/getPassengers',
            {
              method: 'POST',
              headers: {
                Authorization: `Bearer ${userToken}`,
                Accept: 'application/json',
                'Content-Type': 'application/json',
              },
            },
          );
          const responseJson = await response.json();
          if (has(responseJson, 'error')) {
            this.setState({ error: true });
            Alert.alert('Error', 'Please check your credentials.');
          } else {
            passengersDataActionHandler(responseJson.success.data);
          }
        } catch (error) {
          this.setState({ error: true });
          Alert.alert(
            'Error',
            'There was an error with your request, please try again later.',
          );
        }
      }
    };
  
    render() {
      return &lt;TabView style={styles.container} /&gt;;
    }
  }
  
  HomeScreen.defaultProps = {
    userToken: null,
  };
  
  HomeScreen.propTypes = {
    navigation: PropTypes.shape({}).isRequired,
    passengersDataActionHandler: PropTypes.func.isRequired,
    userToken: PropTypes.oneOfType([PropTypes.string]),
  };
  
  export default compose(
    connect(
      store =&gt; ({
        userToken: store.signinScreen.userToken,
        passengersData: store.homeScreen.passengersData,
      }),
      dispatch =&gt; ({
        passengersDataActionHandler: token =&gt; {
          dispatch(passengersDataAction(token));
        },
      }),
    ),
  )(HomeScreen);
  </code></pre>
  
  <p>With this implementation, the component renders many times so it breaks the application.</p>
  
  <p>What could I be doing wrong?</p>