title: Difference between concat and ES6 spread operator for array manipulation in setState (React Hooks)
body: <p>I'm encountering this weird error that I still can't understand what's exactly is happening.</p>
  <p>I'm updating a state array and want to parse new objects to that array with keeping the old ones.</p>
  <p>The known method for me with ES6 was to use the <strong>spread</strong> operator as:</p>
  <pre><code>const [stories, setStories] = useState([]);
  </code></pre>
  <p>...</p>
  <pre><code>setStories(stories =&gt; [...stories, newStories]);
  </code></pre>
  <p>where <strong>newStories</strong> is also an array of objects.</p>
  <p>But here I get the following output:</p>
  <p><a href="https://i.stack.imgur.com/YcfU6.png" rel="nofollow noreferrer">console.log(stories)</a></p>
  <p>while when I do the same with <strong>concat</strong> as:</p>
  <pre><code>setStories(stories =&gt; stories.concat(newStories));
  </code></pre>
  <p>It returns as expected:</p>
  <p><a href="https://i.stack.imgur.com/TaQSm.png" rel="nofollow noreferrer">console.log(stories)</a></p>
  <p>So far, I thought that these 2 methods would perform the same.</p>
  <p>Also I found this article and that confirms my knowledge too, and contradicts with the above output that I'm getting.<a href="https://javascript.plainenglish.io/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc" rel="nofollow noreferrer">See: <strong>Best solution: Spread operator … &amp; a wrapper</strong></a></p>