title: React Native fetch before render components
body: <p>I am creating a Reat Native app which connects to an API from which it gets data.</p>
  
  <p>I am using React Navigation to handle navigation. The app has a Stack Navigator and a Bottom Tab Navigator. The <code>StackNavigator</code> has 4 screens:</p>
  
  <ul>
  <li><code>SignupScreen</code> which handles creating account;</li>
  <li><code>LoginScreen</code> for handlong log in;</li>
  <li><code>SplashScreen</code> that checks for a local token and logs in the user automatically;</li>
  <li>A <code>LoadingScreen</code> that triggers the initial fetch call to the API, stores the response in state and navigates to the <code>MainFlow</code> screen;</li>
  <li>A <code>MainFlow</code> screen that contains the <code>TabNavigator</code>.</li>
  </ul>
  
  <p>The <code>TabNavigator</code> has two screens, <code>FeedScreen</code>, <code>Account</code> and <code>More</code> where the initial screen is <code>FeedScreen</code>.</p>
  
  <p>The signup/login/local flows are all working fine.</p>
  
  <p><strong>The issue</strong>: Once the user is logged in successfully the LoadingScreen is triggering the API call but the <code>MainFlow</code> components are being rendered before the data is in state. Because the components in <code>MainFlow</code> need the data, an error is thrown. How can I render the <code>FeedScreen</code> components only once the data is there?</p>
  
  <p>In the <code>LoadingScreen</code> I am triggering an API call on <code>useEffect</code> from a context object, <code>QuestionContext</code>:</p>
  
  <pre><code>const LoadingScreen = ({ navigation }) =&gt; {
    const [loading, setLoading] = useState(true);
    const { state: authState } = useContext(AuthContext);
    const { getQuestionsForUser, getAllQuestions } = useContext(QuestionContext);
  
    useEffect(() =&gt; {
      getAllQuestions();
    }, []);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;YonStatusBar backgroundColor="#310B3B" /&gt;
        &lt;Image source={splashLogo} containerStyle={styles.splashLogo} /&gt;
        &lt;ActivityIndicator /&gt;
      &lt;/View&gt;
    );
  };
  
  export default LoadingScreen;
  </code></pre>
  
  <p><code>getAllQuestions</code> is a function in <code>QuestionContext</code> which makes the API call and navigates to <code>FeedScreen</code>:</p>
  
  <pre><code>const getAllQuestions = (dispatch) =&gt; {
    return async () =&gt; {
      try {
        const token = await AsyncStorage.getItem('token');
        const config = { headers: { Authorization: `Bearer ${token}` } };
        const response = await yonyonApi.get(`/questions`, config);
        dispatch({ type: 'GET_ALL_QUESTIONS', payload: response.data });
        RootNavigation.navigate('MainFlow');
      } catch (e) {
        console.log(e);
      }
    };
  };
  </code></pre>
  
  <p><code>getAllQuestions</code> is working fine: the API call is successful and I can see that the response is stored in state. However, it navigates to <code>MainFlow</code> before that happens.</p>
  
  <p>Finally, this is the <code>FeedScreen</code>:</p>
  
  <pre><code>const FeedScreen = () =&gt; {
    const { state: questionState } = useContext(QuestionContext);
  
    return (
      &lt;ScrollView style={styles.container}&gt;
        {console.log(questionState.questions)}
        &lt;View style={styles.listContainer}&gt;
          &lt;QuestionCard /&gt;
        &lt;/View&gt;
      &lt;/ScrollView&gt;
    );
  };
  
  export default FeedScreen;
  </code></pre>
  
  <p>The <code>FeedScreen</code> renders a <code>QuestionCard</code> which needs the data in <code>questionState</code>. This is what throwing the error: the <code>QuestionCard</code> is being rendered before the data is in state.</p>
  
  <p>How can I make the navigation only navigate to <code>FeedScreen</code> once the necessary data is in state? Or alternatively, render something else than the <code>QuestionCard</code> while the data is not there and once the data is in <code>questionState</code> render the <code>QuestionCard</code>?</p>