title: Is React's useReducer is synchronous compared to asynchronous nature of useState?
body: <p>I was in a impression that both <code>useState</code> and <code>useReducer</code> works similarly except the fact that we should use useReducer when the state is complex/nested objects.</p>
  <p>But today I found a strange behavior, I was looping over an array and setting the values to a state object.  I did this same example using both <code>useState</code> and <code>useReducer</code>.</p>
  <p>With <code>useState</code>: It only pushes the last value from the array to the state object, as useState is async in nature, So when we setState inside a loop, it may not update properly based on previous state. So you get just the last one object inside the state.</p>
  <p>With <code>useReducer</code>: I was expecting the same behaviour with useReducer, but with useReducer, it seems to properly set the states when we <code>dispatch</code> actions from inside a loop. So here you get all the objects inside the state.</p>
  <p><strong>useState</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  function App() {
    const [students, setStudents] = React.useState({});
    
    const createStudents = () =&gt; {
      const ids = [1,2,3];
      const names = ['john', 'michael', 'greg']
      for(let i = 0; i &lt; 3; i++){
        const student = {[ids[i]]: names[i]};
        setStudents({...students, ...student})
      }
    }
    return (
      &lt;div className="App"&gt;
        &lt;button onClick={createStudents}&gt;Create Students&lt;/button&gt;
        &lt;br /&gt;
        {JSON.stringify(students)}
      &lt;/div&gt;
    );
  }
  
     </code></pre>
  </div>
  </div>
  </p>
  <p><strong>useReducer</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  function App() {
    const studentReducer = (state, action) =&gt; {
      switch (action.type) {
        case 'ADD':
          return {...state, students: {...state.students, ...action.payload}};
        default:
          throw new Error();
      }
    }
  
    const [students, dispatch] = React.useReducer(studentReducer, {students: {}});
  
    const createStudents = () =&gt; {
      const ids = [1,2,3];
      const names = ['john', 'michael', 'greg']
      for(let i = 0; i &lt; 3; i++){
        const student = {[ids[i]]: names[i]};
        dispatch({type: 'ADD', payload: student})
      }
    }
    return (
      &lt;div className="App"&gt;
        &lt;button onClick={createStudents}&gt;Create Students&lt;/button&gt;
        &lt;br /&gt;
        {JSON.stringify(students)}
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>