title: Best Practices to handle authentication flow in react native
body: <p>I have react native app and i am implementing auth flow using <code>Context API</code>
  the nature of the app is when user open it won't request to login or signup and user can explore the app screens however when user add items to cart and about to checkout then will be requested to sign-in/sign-up to continue.</p>
  <p>let's assume these are the screens</p>
  <pre><code>Home-&gt; shop -&gt; cart 
  </code></pre>
  <p>so when user in the cart will be asked to login, after login user value in context provider will be updated and they continue from same screen the user logged in (which in this case is cart screen)
  However, when provider value updated all screens re-render again and redirect to initial route which home screen.
  how can i handle this scenario which not re-render all screen again.</p>
  <p>In my app i am passing the navigation stuck as a children to context provider as follow:</p>
  <pre><code>&lt;AuthProvider&gt;
     &lt;Routes /&gt;
  &lt;/AuthProvider&gt;
  </code></pre>
  <p>and here is the code of context provider:
  authProvider.js:</p>
  <pre><code> export const AuthContext = createContext();
      export const AuthProvider = ({ children }) =&gt; {
      
       const [user, setUser] = useState(null);
       const value = useMemo(
              () =&gt; ({ user, setUser }),
              [user]);
  
  
       return (
              &lt;AuthContext.Provider 
                      value={{
                               value,
                               login: async (email, password) =&gt; {
                                //here i am validating the login details and update user state                 
                                // if login successful 
                                    setUser(/*some data related to user */)
                                   //when i set user data here it re-render all screens again
                                // if login failed 
                                    setUser(null)
                                 }
                             }}&gt;         
                     {children}
              &lt;/AuthContext.Provider &gt;
  </code></pre>
  <p>and the following the Routes.js which i am passing it as children to the above code:</p>
  <pre><code>const Routes = () =&gt; {
  
   const { value } = useContext(AuthContext);
   
  
  // validate token with backend
  useEffect(() =&gt; {
          setTimeout(async () =&gt; {
              const Token = await AsyncStorage.getItem('Token');
              if (Token === null) {
                  value.setUser(null)
              } else {
                  await axios.get(URL, {
                      headers: { 'x-auth-token': Token },
                  }).then(async (res) =&gt; {
                      const {data} = res;
                      value.setUser(data)
  
                  }).catch(async (err) =&gt; {
                      if (err.response) {
                              await AsyncStorage.removeItem('Token');
                              value.setUser(null)
                      }
                  });
              }
          }, 1000)
  
      }, []);
  
  
  
   return (
          &lt;&gt;
              &lt;NavigationContainer&gt;
                   //this is the stuck where i have the three screen mentioned above (home, shop, cart)
                 &lt;AppStuckScreen  /&gt;
              &lt;/NavigationContainer&gt;
          &lt;/&gt;
  
  
      )
  }
  
  export default Routes;
  </code></pre>
  <p>In cart screen i am checking the user values stored in context provider if null then open the login form.</p>
  <p>I hope someone can help me on how to handle this situation where not to re-render all component again when updating user value in Context provider.</p>