title: Bug with useState / useEffect react spread operator
body: <p>I am having an issue where I am setting state with a spread operator but the function call in <code>useEffect</code> only ever sets the last value pulled from the API into state. </p>
  
  <pre><code>// get all events to display on load
  const getEvents = () =&gt; {
      console.log(props.id);
      axios.get(API.EVENTS.ROOT + props.id).then(
          res =&gt; {
              const data = res.data;
              setEvent(data);
              console.log(data);
              // event start and end dates
              setStart(new Date(data.start));
              setEnd(new Date(data.finish));
              // breakout dates
              for (let i = 0; i &lt; data.breakouts.length; i++) {
                  console.log(data.breakouts[i].start);
                  data.breakouts[i].start = new Date(data.breakouts[i].start);
                  data.breakouts[i].end = new Date(data.breakouts[i].end);
                  console.log(data.breakouts[i].name, "test" + data.breakouts[i].start);
                  // set date picker initial value 
                  setFields({
                      ...fields,
                      [data.breakouts[i].name]: data.breakouts[i].start
                  })
                  console.log(fields);
              }
  
              setBreakoutRow(data.breakouts);
              console.log(breakoutRow);
  
          }
      ).catch(err =&gt; {
          console.log(err);
      })
  }
  // get events on load
  useEffect(() =&gt; {
      console.log(props);
      getEvents();
  }, []);
  </code></pre>
  
  <p>I add the fields state variable or the <code>getEvents</code> function as a dependency it does update the <code>state</code> of fields for all values but it results in an infinite loop of death. This is giving me blank dates in mapped rows for all but the last. </p>
  
  <p>Another item of note is that after the page loads the fields object can be updated no problem through a function call, as so:</p>
  
  <pre><code>const handleDateChange = (dateName, dateValue) =&gt; {
          console.log(dateName, dateValue);
          setFields({
              ...fields,
              [dateName]: dateValue
          })
          console.log(fields);
      }
  </code></pre>
  
  <p>This leads me to believe there is something wrong with my <code>useEffect</code> hook but I am not sure where it's going wrong.</p>