title: Why am I getting the following React Native warning: Can't perform a React state update on an unmounted component
body: <p>I'm trying to build a React Native app, but am still kind of new to the React/RN ecosystem, so I may just be misunderstanding something obvious with the problem I'm having.</p>
  
  <p>I have an app where a lot of the pages are structured as follows:</p>
  
  <pre><code>&lt;View&gt;
      &lt;NavComponent /&gt;
      &lt;View&gt;
          {/* Page component structure/logic here */}
      &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><code>NavComponent</code> loads a toggleable nav menu with <code>TouchableOpacity</code> elements like the following:</p>
  
  <pre><code>Go to Screen #1
  Go to Screen #2
  Go to Screen #3
  </code></pre>
  
  <p>The problem I'm having (and maybe this isn't a problem so much as just how React/RN works) is that if I start on screen #1, open the nav, go to screen #2, open the nav again, and then go back to screen #1, even though screen #1 shows up again, the actual rendering function for screen #1 doesn't seem to be called again, and since <code>NavComponent</code> is part of the rendering of each screen, when I try to open the nav from screen #1 again, I get the following warning:</p>
  
  <blockquote>
    <p>Warning: Can't perform a React state update on an unmounted component.
    This is a no-op, but it indicates a memory leak in your application.
    To fix, cancel all subscriptions and asynchronous tasks in %s.%s, a
    useEffect cleanup function ...</p>
  </blockquote>
  
  <p>Again, maybe my approach with the app is flawed to begin with, but essentially, when I go from one screen to another from the nav, I always want the new screen to re-render from scratch (including the initial Ajax call for data).</p>
  
  <p>Here's a more fleshed-out example of the render function for a screen (they all follow this same basic pattern):</p>
  
  <pre><code>const screen1 = ({ navigation }) =&gt; {
      const [serverData, setServerData] = useState(null);
  
      useEffect(() =&gt; {
          // getPageData is a custom method I added to axios.
          axios.getPageData('/api/url/here', (data) =&gt; {
              setServerData(data);
          });
      }, []);
  
      if (serverData) {
          const { meta, user, data } = serverData;
  
          return (
              &lt;View&gt;
                  &lt;NavComponent /&gt;
                  &lt;View style={styles.container}&gt;
                      {/* Page component structure/logic here */}
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  
      return null;
  };
  </code></pre>
  
  <p>If, for example, I added a <code>console.log</code> to the beginning of the render function above, it's called the first time the screen is loaded, but if I go to screen #2 and then come back to screen #1 via the nav component, the <code>console.log</code> isn't output again. Why?</p>
  
  <p>And for what it's worth, I'm using the standard <code>navigation.navigate('ScreenName')</code> in <code>NavComponent</code> to go from screen to screen.</p>
  
  <p>Any advice on how to fix the warning (and/or just better design the app) so that I can have that nav on every page would be greatly appreciated. Thank you.</p>