title: What is the best way to process large arrays in Javascript?
body: <p>I have a React JS app that uses an API to pull a JSON object that contains an array of 10,000+ objects. This array is then used to populate a table, with certain filters and options from checkboxes, dropdowns, that can manipulate the data. When tapping a checkbox, filter, sort, reduce functions are used on the array to return a specific subset of the array that can populate the table again.</p>
  <p>There are 10-15 options to choose from, so 10-15 filter/map/reduce functions running on the data each time a box is checked.</p>
  <p>These filtering options now cause a noticeable lag between clicking on the checkbox and changing the table. The app freezes while it calculates the new array. Is there a more efficient flow to filter my data?</p>
  <p>Some example functions below below:</p>
  <pre><code>//gameData is an array of 10k+ objects
  let inData = gameData
  
  const options = {
      dateToTime: new Date('2020-03-01'),
      servers:[1,2,3],
      maps:['A','B','C']
  }
  
  function groupByArray(array, key) {
      return array.reduce(function (rv, x) {
          let v = key instanceof Function ? key(x) : x[key];
          let el = rv.find((r) =&gt; r &amp;&amp; r.key === v);
          if (el) {
              el.values.push(x);
          } else {
              rv.push({ key: v, values: [x] });
          } return rv;
      }, []);
  }
  
  const gamesGrouped = groupByArray(inData, 'gameid')
  inData = gamesGrouped.filter(a =&gt; a.playername != &quot;new&quot;)
  inData = inData.filter(game =&gt; {
      const thisTime = new Date(game.creationtime)
      return (thisTime &lt; options.dateToTime)
  })
  inData = inData.filter(game =&gt; options.servers.includes(game.serverip))
  inData.filter(game =&gt; options.maps.includes(game.map))
  </code></pre>
  <p>Thanks in advance!</p>