title: Do I need to use PrevState even if I spread the state into a variable?
body: <p>I am testing some code to try and understand the <code>race condition</code> regarding the use of <code>setState()</code>.</p>
  
  <p>my code can be found <a href="https://codesandbox.io/embed/unique-id-generator-xeq2m?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">here</a></p>
  
  <p>my code below:</p>
  
  <pre><code>import React from "react";
  
  export default class App extends React.Component {
    state = {
      id: "",
      ids: [{ id: 7 }, { id: 14 }]
    };
  
    // here is where I create the id numbers
    uniqueIdCreatorHandler = incrementAmount =&gt; {
      let ids = [...this.state.ids];
      let highestId = 0;
      if (ids.length &gt; 0) {
        highestId = ids
          .map(value =&gt; {
            return value.id;
          })
          .reduce((a, b) =&gt; {
            return Math.max(a, b);
          });
      }
      let newId = highestId + incrementAmount;
      ids.push({ id: newId });
      this.setState({ ids: ids });
    };
  
    idDeleterHanlder = currentIndex =&gt; {
      let ids = this.state.ids;
      ids.splice(currentIndex, 1);
      this.setState({ ids: ids });
    };
    //below is when I test performing the function twice, in order to figure if the result would be a race condition
    double = (firstIncrementAmount, secondIncrementAmount) =&gt; {
      this.uniqueIdCreatorHandler(firstIncrementAmount);
      this.uniqueIdCreatorHandler(secondIncrementAmount);
    };
  
    render() {
      let ids = this.state.ids.map((id, index) =&gt; {
        return (
          &lt;p onClick={() =&gt; this.idDeleterHanlder(index)} key={id.id}&gt;
            id:{id.id}
          &lt;/p&gt;
        );
      });
  
      return (
        &lt;div className="App"&gt;
          &lt;button onClick={() =&gt; this.uniqueIdCreatorHandler(1)}&gt;
            Push new id
          &lt;/button&gt;
          &lt;button onClick={() =&gt; this.double(1, 2)}&gt;Add some Ids&lt;/button&gt;
          &lt;p&gt;all ids below:&lt;/p&gt;
          {ids}
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>when invoking the <code>double</code> function on the second <code>button</code> only the <code>secondIncrementAmount</code> works. You can test it by changing the argument values on the call made on the <code>onClick</code> method.</p>
  
  <p>I think that I should somehow use <code>prevState</code> on <code>this.setState</code> in order to fix this.</p>
  
  <p>How could I avoid this issue here? <a href="https://codereview.stackexchange.com/questions/237536/safe-way-of-creating-unique-ids">This matter started at CodeReview</a> but I did not realize how could I fix this.</p>
  
  <p>There is also a recommendation to spread the mapped ids into <code>Math.max</code> and I could not figure out how and Why to do it. Isn't the creation of the new <code>array</code> by mapping the spreaded key values safe enough?</p>