title: How to wait for React useEffect hook finish before moving to next screen
body: <p>I'm having issue where hook is being used in multiple files and it is being called twice for useEffect before the 1st one's async method finish (which should block the 2nd hook call, but it's not). See below 2 scenarios:</p>
  
  <p>Stack Navigator</p>
  
  <pre><code>const { context, state } = useLobby(); // Hook is called here 1st, which will do the initial render and checks
  
  return (
    &lt;LobbyContext.Provider value={context}&gt;
      &lt;LobbyStack.Navigator&gt;
        {state.roomId
          ? &lt;LobbyStack.Screen name="Lobby" component={LobbyScreen} /&gt;
          : &lt;LobbyStack.Screen name="Queue" component={QueueScreen} /&gt;
        }
      &lt;/LobbyStack.Navigator&gt;
    &lt;/LobbyContext.Provider&gt;
  )
  </code></pre>
  
  <p>Lobby Hooks</p>
  
  <pre><code>export const useLobby = () =&gt; {
    const [state, dispatch] = React.useReducer(...)
  
    //
    // Scenario 1
    // This get called twice (adds user to room twice)
    //
    React.useEffect(() =&gt; {
      if (!state.isActive) assignRoom();
    }, [state.isActive])
  
    const assignRoom = async () =&gt; {
      // dispatch room id
    }
  
    const context = React.useMemo(() =&gt; ({
      join: () =&gt; { assignRoom(); }
    })
  }
  </code></pre>
  
  <p>Queue Screen</p>
  
  <pre><code>const { context, state } = useLobby(); // Hook is called here 2nd right after checking state from stack navigator
  
  //
  // Scenario 2
  // Only does it once, however after state is changed to active
  // the stack navigator didn't get re-render like it did in Scenario 1
  //
  React.useEffect(() =&gt; {
    roomLobby.join();
  }, []);
  
  return (
  ...
    {state.isActive
      ? "Show the room Id"
      : "Check again"
  ...
  )
  </code></pre>
  
  <p>In scenario 1, I guess while 1st hook is called and useEffect is doing async to add user to the room and set active to true. Meanwhile the conditional render part is moving straight to Queue screen which calls the hook again and doing the useEffect (since 1st haven't finished and <code>isActive</code> is still false).</p>
  
  <p>How can I properly setup useReducer and useMemo so that it renders the screen base on the state.</p>
  
  <p><strong>Edited codes based on the answer</strong></p>
  
  <pre><code>/* LobbyProvider */
  
  const LobbyContext = React.createContext();
  
  const lobbyReducer = (state, action) =&gt; {
    switch (action.type) {
      case 'SET_LOBBY':
        return {
          ...state,
          isActive: action.active,
          lobby: action.lobby
        };
      case 'SET_ROOM':
        return {
          ...state,
          isQueued: action.queue,
          roomId: action.roomId,
        };
      default:
        return state;
    }
  }
  
  const LobbyProvider = ({ children }) =&gt; {
    const [state, dispatch] = React.useReducer(lobbyReducer, initialState);
  
    React.useEffect(() =&gt; {
      console.log("Provider:", state)
      if (!state.isActive) joinRoom();
    }, [])
  
    // Using Firebase functions
    const joinRoom = async () =&gt; {
      try {
        const response = await functions().httpsCallable('getActiveLobby')();
        if (response) {
          dispatch({ type: 'SET_LOBBY', active: true, lobby: response.data })
          const room = await functions().httpsCallable('assignRoom')({ id: response.data.id });
          dispatch({ type: 'SET_ROOM', queue: false, roomId: room.data.id })
        }
      } catch (e) {
        console.error(e);
      }
    }
  
    return (
      &lt;LobbyContext.Provider value={{state, dispatch}}&gt;
        { children }
      &lt;/LobbyContext.Provider&gt;
    )
  }
  
  
  /* StackNavigator */ 
  
  const {state} = React.useContext(LobbyContext);
  
  return (
    &lt;LobbyProvider&gt;
      // same as above &lt;LobbyStack.Navigator&gt;
      // state doesn't seem to be updated here or to re-render
    &lt;/LobbyProvider&gt;
  );
  
  
  /* Queue Screen */
  
  const {state} = React.useContext(LobbyContext);
  
  // accessing state.isActive to do some conditional rendering
  // which roomId does get rendered after dispatch
  </code></pre>