title: What is the most efficient way to merge both states in JavaScript
body: <p>I am trying to create a Grouped List with Infinite Scroll Pagination in React as below.</p>
  <p><a href="https://i.stack.imgur.com/H3JVS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H3JVS.png" alt="Application UI" /></a></p>
  <p>I'm Grouping items from WEB API using LINQ GroupBy after fetching each page and returning back to client as below JSON format.</p>
  <p><a href="https://i.stack.imgur.com/22wDg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/22wDg.png" alt="JSON format for each page of data" /></a></p>
  <p>Now some times groups can repeat and I want to merge the same to avoid duplicate Section Headers.</p>
  <p>I tried the below code to do it Immutably</p>
  <pre class="lang-js prettyprint-override"><code>let currentStateClone = [...currentState];
  
  stateNew.forEach((st)=&gt;{
      let itemIndex = currentState.findIndex(x=&gt;x.title===st.title);
      
      if(itemIndex &gt;= 0){
        //Key already existson current state then merge
        currentStateClone = currentState.map((item,index)=&gt;{
              if(index===itemIndex)
                  return {...item,data:[...item.data,...st.data]};
              else
                 return {...item};
        });
      }else{
       //New Key Found Append
        currentStateClone = currentStateClone.concat(st);
      }
  });
  </code></pre>
  <p><strong>Now my question is what is the most <em>&quot;Performant and Cross Browser way&quot;</em> to merge these two states (json arrays) in JavaScript ?</strong></p>