title: bad setstate() when redirecting user with react-navigation?
body: <p>I'm coding an onboarding process that depends on a state. For each &quot;page&quot; the user completes the state increments and returns the next JSX page. At the last step, I'm navigating the user to a page called explore page.</p>
  <p>Below is the bug I'm getting when I don't have the setTimeout method around the navigation.navigate function. The full error trace leads back to the navigate function.</p>
  <p>This is a snippet of the error:</p>
  <blockquote>
  <p>index.js:1 Warning: Cannot update a component (<code>ForwardRef(BaseNavigationContainer)</code>) while rendering a different component (<code>OnboardingTemplate</code>). To locate the bad setState() call inside <code>OnboardingTemplate</code>, follow the stack trace as described in <a href="https://facebook.me/setstate-in-render" rel="nofollow noreferrer">https://facebook.me/setstate-in-render</a></p>
  </blockquote>
  <p>Each step works fine and it returns the JSX but it seems like that because the view hasn't finished rendering it throws the above error while loading the explore page. The error occurs even though the explore page gets shown. I've tried with useEffect and everything I could think of but I can't figure it out. And it seems weird if setTimeout is the right solution.</p>
  <p>Here is the code:</p>
  <pre><code>import React, {useEffect, useState} from 'react'
  import {View,ScrollView,StyleSheet} from 'react-native'
   
  import Button from '../ui/atoms/Button'
  import { useNavigation } from '@react-navigation/native'
            
  let currentStep : JSX.Element;
  export default function OnboardingTemplate(){
  
      const navigation : any = useNavigation()
  
      const [loaded,setLoaded] = useState(false);
  
      useEffect(() =&gt; {
          setLoaded(true)
      })
  
      const [onboardingStep, setOnboardingStep]:any = useState(0);
  
      if (onboardingStep == 0){
          currentStep=(
              &lt;ScrollView&gt;
                  &lt;View style={styles.topDistance}&gt;
                      &lt;Button onPress={() =&gt; setOnboardingStep(1)} 
                      style={styles.inputBtn} title=&quot;Fortsæt (1/2)&quot;/&gt;
                  &lt;/View&gt;
              &lt;/ScrollView&gt;
          )    
      } else if (onboardingStep == 1){
          currentStep=(
              &lt;ScrollView&gt; 
                 &lt;View style={styles.topDistanceSmall}&gt;
                      &lt;Button onPress={() =&gt; setOnboardingStep(2)} 
                      style={styles.inputBtn} title=&quot;Opret profil&quot;/&gt;
                  &lt;/View&gt;
              &lt;/ScrollView&gt;
          )
      } else if (loaded) {
               navigation.navigate(&quot;explore&quot;);
   
      }
  
      return (currentStep) ? currentStep : null ;
  }
  </code></pre>