title: How to optimize select option in ReactJS
body: <p>I'm creating a project where I need to render almost <code>2100+</code> select option. But whenever I render with default bootstrap select option than I render too slow. That's why I do use <code>react-select &amp; react-window</code>. I follow many way to solve it but can't.</p>
  <p>How can I solve it?</p>
  <h4>Dependencies</h4>
  <ul>
  <li>react-select</li>
  <li>react-window</li>
  <li>react-bootstrap</li>
  </ul>
  <h4>Information</h4>
  <ul>
  <li>I'm getting <code>2100+</code> data with <code>useSelector</code> from <code>redux</code> store.</li>
  <li>Wherever I look for solve this issue, I found this <a href="https://stackoverflow.com/questions/62143009/efficiently-rendering-large-list-of-data-in-react-select">example</a> everywhere. Here they use loop to render <code>2500</code> or more. But my data are coming from <code>redux</code> store.</li>
  <li>My data is look like</li>
  </ul>
  <pre class="lang-json prettyprint-override"><code>data = [{&quot;title&quot;: &quot;A&quot;, &quot;key&quot;: &quot;a&quot;, &quot;code&quot;: &quot;512&quot;},
          {&quot;title&quot;: &quot;B&quot;, &quot;key&quot;: &quot;b&quot;, &quot;code&quot;: &quot;513&quot;}
          .....
         ]
  </code></pre>
  <ul>
  <li>I need to create <code>select option</code> with <code>title</code>.</li>
  <li>I'm using functional component to use <code>useSelector</code> that's why I can't get data outside component.</li>
  <li>I can't create a code sandbox cause of there the data will be missing.</li>
  <li>I have follow many ways to solve this but can't. Here I'm providing current situation of my code.</li>
  </ul>
  <h4>Code</h4>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { useSelector } from 'react-redux'
  import Select, { createFilter } from 'react-select';
  import { FixedSizeList as List } from 'react-window'
  
  
  const Board = () =&gt; {
  
      const icons = useSelector(state =&gt; state.icons.iconsData)
      
  
      return (
          &lt;&gt;
              &lt;div className=&quot;container py-5&quot;&gt;
                  &lt;div className=&quot;d-flex flex-row&quot;&gt;
                      &lt;div&gt;
                          &lt;p&gt;Select Option&lt;/p&gt;
                          &lt;Select options={icons}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  
  export default Board
  </code></pre>