title: Function in stack that gets rendered if the user is logged in, executes after the user has logged out, resulting in a network error
body: <p>My <code>App.tsx</code> file renders 2 different components based on the authentication state:</p>
  <pre><code>{!isAuthenticated ? &lt;AuthStack /&gt; : &lt;RootNavigation /&gt;}
  </code></pre>
  <p>The problem is that when I am on a screen in the <code>&lt;RootNavigation /&gt;</code> and I logout, a function from one of the components in the <code>&lt;RootNavigation /&gt;</code> executed which makes a GET request to the server, but since I am no longer authenticated, the GET request fails.</p>
  <pre><code>const Home: FunctionComponent&lt;ScreenProps&gt; = () =&gt; {
      const { data: article, isLoading } = useGetArticle('home'); // This GET request fails
  
      if (!article || isLoading) return &lt;LoadingIndicator /&gt;;
  
      return (
          &lt;Container&gt;
              &lt;Article article={article} /&gt;
          &lt;/Container&gt;
      );
  };
  
  export default Home;
  </code></pre>
  <p>My understanding is that once I log out, this component would unmount and the  would get mounted, which is what actually happens. What I don't understand is why it makes a GET request once more before unmounting.</p>
  <p>AuthStack Component</p>
  <pre><code>const AuthStack: FunctionComponent = () =&gt; {
      const navigation = useNavigation&lt;LandingScreenNavigationProp&gt;();
      const { ref, setFocus } = useAccessibilityFocus&lt;View&gt;();
  
      const { t } = useTranslation('log_in');
  
      const renderTitle = useCallback((title: string) =&gt; &lt;NavigationHeaderTitle ref={ref} title={title} /&gt;, [ref]);
  
      return (
          &lt;Stack.Navigator
              initialRouteName=&quot;Landing&quot;
              screenListeners={{ transitionEnd: setFocus }}
          &gt;
              &lt;Stack.Screen options={{ headerShown: false }} name=&quot;Landing&quot; component={Landing} /&gt;
              &lt;Stack.Screen
                  name=&quot;EnterEmail&quot;
                  component={EnterEmail}
              /&gt;
              &lt;Stack.Screen name=&quot;EnterPassword&quot; component={EnterPassword} /&gt;
              &lt;Stack.Screen
                  name=&quot;EnterOTP&quot;
                  component={EnterOTP}
              /&gt;
              &lt;Stack.Screen
                  name=&quot;CreateAnAccount&quot;
                  component={CreateAnAccount}
              /&gt;
              &lt;Stack.Screen
                  name=&quot;CheckYourEmail&quot;
                  component={CheckYourEmail}
              /&gt;
              &lt;Stack.Screen options={{ headerShown: false }} name=&quot;AuthWebView&quot; component={WebView} /&gt;
          &lt;/Stack.Navigator&gt;
      );
  };
  
  export default AuthStack;
  </code></pre>