title: Getting memory leak error from UseEffect for react native navigation auth flow
body: <p>I am trying to set react native navigation auth flow but I give an error like;</p>
  <blockquote>
  <blockquote>
  <p><strong>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 a useEffect cleanup function.</strong></p>
  </blockquote>
  </blockquote>
  <p>Most likely the error is caused by the codes here. I fixed it before while getting a different error from here, but now it gives a memory leak error.</p>
  <pre><code>  React.useEffect(() =&gt; {
      // Fetch the token from storage then navigate to our appropriate place
      const bootstrapAsync = async () =&gt; {
        let userToken;
        try {
          userToken = await SecureStore.getItemAsync(LOGIN_KEY);
          // IF USER ALREADY LOGGED IN CREATE NEW TOKEN TO KEEP USER LOGGED IN
          if(userToken!==null){
            let email = await SecureStore.getItemAsync(USER_NAME)
            let loginPassword = await SecureStore.getItemAsync(USER_PASSWORD)
            authContext.signIn({email,loginPassword})
                        .then(res=&gt; {
                             if(res.response.status ==401){
                                authContext.signOut()
                                }
                              console.log(res)
                        })
                        .catch(err=&gt;{ console.log(err)})
          }
          console.log(&quot;userTokennn &quot;, userToken )
        } catch (e) {
          // Restoring token failed
          console.log(&quot;boostrapError&quot;, e)
        }
        // After restoring token, we may need to validate it in production apps
        // This will switch to the App screen or Auth screen and this loading
        // screen will be unmounted and thrown away.
        dispatch({ type: 'RESTORE_TOKEN', token: userToken });
      };
       bootstrapAsync();
    }, []);
  
  </code></pre>
  <p>Also, I tried to use clean up function but it didn't work like this;</p>
  <pre><code>};
      return ()=&gt; bootstrapAsync();
    }, []);
  </code></pre>
  <p>The rest of the codes are here;</p>
  <pre><code>const authContext = React.useMemo(
      () =&gt; ({
        signIn: async (data) =&gt; {
          // In a production app, we need to send some data (usually username, password) to server and get a token
          // We will also need to handle errors if sign in failed
          // After getting token, we need to persist the token using `SecureStore`
          // In the example, we'll use a dummy token
           //SEND LOGIN INFO TO SERVER
         return await postSignIn(data.email, data.loginPassword)
          .then(async(res)=&gt;{
              token = res.data.token
              await SecureStore.setItemAsync(LOGIN_KEY, token);
              await SecureStore.setItemAsync(USER_NAME, data.email )
              await SecureStore.setItemAsync(USER_PASSWORD, data.loginPassword )
              dispatch({ type: 'SIGN_IN', token: token });
          })
          .catch((err)=&gt;{ console.log(&quot;sign in error&quot;, err); return err})
        },
      
        signOut: () =&gt; dispatch({ type: 'SIGN_OUT' }),
        signUp: async (data) =&gt; {
          // In a production app, we need to send user data to server and get a token
          // We will also need to handle errors if sign up failed
          // After getting token, we need to persist the token using `SecureStore`
          // In the example, we'll use a dummy token
  
          dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
        },
      }),
      []
    
    );
  </code></pre>