title: Code is moving on before my fetch is completed
body: <p>I'm having a problem where inside my useEffect whenever I call getRoomDetails, the code continues on before it's finished fetching data from my API. So it will create the Chess object with the default value I've given for boardState, instead of the updated value from my API. How could I get it so it waits until getRoomDetails finishes, before moving onto creating the Chess object.</p>
  <pre><code>    const initialState = {
      hostTime: 600,
      guestTime: 600,
      chessAnnotations: &quot;&quot;,
      isHost: true,
      fen: &quot;start&quot;,
  }
  
  const getRoomDetails = () =&gt; {
      fetch('/api/get-room?code=' + roomCode).then((response) =&gt;
          response.json()
      ).then((data) =&gt; {
          const newObj = {
              hostTime: data.host_curr_time,
              guestTime: data.guest_curr_time,
              chessAnnotations: data.chess_annotations,
              isHost: data.is_host,
              fen: data.fen,
          };
          setBoardState(newObj);
          console.log(newObj)
      });
  }
  
  const [boardState, setBoardState] = useState(initialState);
  
  
  let game = useRef(null);
  useEffect(() =&gt; {
      getRoomDetails();
      console.log(boardState.fen + &quot;lit&quot;);
      game.current = new Chess(boardState.fen);
      console.log(&quot;0&quot;);
  }, []);
  </code></pre>
  <p>Output:</p>
  <pre><code>start 0
  0
  Object { hostTime: &quot;600.00&quot;, guestTime: &quot;600.00&quot;, chessAnnotations: &quot;sdf&quot;, isHost: false, fen: &quot;rnbqkbnr/pppppppp/8/8/8/3P4/PPP1PPPP/RNBQKBNR b KQkq - 0 1&quot; }
  </code></pre>