title: javascript array filter very slow in REACT
body: <p>I have a custom listbox, a <code>div</code> that contains a vertical list of other <code>div</code> children. And I have <code>input</code> for search something else in the list. It's working but in large data, it's working very slowly.</p>
  
  <p>Also search criterion produce dynamically with column chooser. How can i increase search performance.</p>
  
  <p><strong>Firsly, prepare filter data for search and keeping state on the page load</strong></p>
  
  <pre><code>prepareFilterData(allData) {
    const filteredData = [];
    let columnChooser = JSON.parse(getItemFromLocalStorage("ColumnData"));
    allData.map(item =&gt; {
      var data = "";
      columnChooser.map(element =&gt; {
        var newData = { value: item[element.value], format: element.format };
        var filterItem = getFilterDataFormat(newData);
        data += filterItem + " ";
      });
      filteredData.push(data);
    });
    this.setState({
      filteredData: filteredData
    });
  }
  </code></pre>
  
  <p><strong>Secondly, When user enter an char to <code>textbox</code>, i'm checking <code>filteredData</code></strong> </p>
  
  <pre><code>filterList() {
    const updatedList = this.state.allData.length &gt; 0 ? this.state.allData : [];
    var filteredData = [];
    filteredData = updatedList.filter((item, index) =&gt; {
      const data = this.state.filteredData[index];
      return data.indexOf(this.state.searchInputValue) !== -1;
    });
    return filteredData;
  }
  </code></pre>
  
  <p>This is <code>input</code> statement</p>
  
  <pre><code>&lt;input 
    id="searchBox"
    type="text"
    className="filter-input empty"
    placeholder="Search"
    onChange={this.filterList}
    value={this.props.state.searchInputValue}
    style={{ width: "100%" }} /&gt;
  </code></pre>