title: useSelector, and properly switching slices of data to avoid excessive slow downs
body: <p>I have a list of objects - each with various properties... the list is about 4000 long.</p>
  <p>there is a reason to filter and show a subsection of the slice based on a property of these objects... for example... selecting all of them that have the 'paid' bool set to true, or 'rush' bool.</p>
  <p>this is my current code.</p>
  <pre><code>import {selectJobs,
      selectCompleteJobs,
      selectUncompleteJobs, 
      selectUnpaidJobs} from &quot;../../slices/jobCardSlice&quot;;
  
  
  // inside the component
  const [selectors, setSelectors] = useState([selectUncompleteJobs,selectJobs,selectCompleteJobs,selectUnpaidJobs]); // an array of selectors
  const found = selectors.find(x=&gt;x===props.selector); //initial selector choosed
  const [chosenSelector, setChosenSelector] = useState(selectors.indexOf(found)||0); //a number 
  const jobs = useSelector(selectors[chosenSelector]); // the slice
  const selectControls = (
      &lt;select className=&quot;selectControls&quot;  onChange={(e)=&gt;{
      setChosenSelector(e.target.value);
  }}&gt;{selectors.map((x,i)=&gt;&lt;option value = {i}&gt;{x.name}&lt;/option&gt;)}
      &lt;/select&gt;
  ); // the thing that changes the slice a select element that selects a selector
  
  
  var jobscards = jobs.map(jobDatat=&gt;(&lt;JobCard key={jobDatat.id} props={jobDatat} /&gt;));
  
  // then it renders a box with the selector in the head - and a list of jobcards in the body (boxes have a head/title area, and a body/list area);
  </code></pre>
  <p>and here are the selectors, they are pretty basic.</p>
  <pre><code>export const selectJobs = (state) =&gt;{
       return state.jobs;
  }
  export const selectNoData = (state)=&gt;{
      return state.jobs.filter(x=&gt;x.data===1);
  }
  export const selectCompleteJobs = (state) =&gt;{
      return state.jobs.filter(x=&gt;x.JobStatus === &quot;COMPLETE&quot;);
  }
  export const selectUncompleteJobs = (state) =&gt;{
      return state.jobs.filter(x=&gt;x.JobStatus !== &quot;COMPLETE&quot;);
  }
  export const selectUnpaidJobs = (state) =&gt;{
      return state.jobs.filter(x=&gt;x.paidStatus!== &quot;PAID&quot;);
  }
  </code></pre>
  <p>switching between small slices is just barely fast enough... however, if I change to a large slice - it takes more than 15 seconds to load in.</p>
  <p>is there a better way to handle filtering of a selector? this is literally just the first thing that came to mind - it technically works but is no where close to production ready due to speed.</p>
  <p>how do you handle filtering long lists? (also - the initial load in with all fresh data from the server: that first render is maybe one second - so I think there is a pattern that can be that fast...)</p>
  <p>I'm new to react - and I haven't found anything about a good way of handling this yet.</p>
  <p>EDIT: i have made the following changes to the slice.</p>
  <pre><code>//instead of the old selectors - they are now:
  
  
  export const selectNoData = createSelector(
      //input selector all jobs
      selectJobs,
      jobs=&gt;jobs.filter(x=&gt;x.dataRecieved==1)
  
  )
  
  export const selectUnpaidJobs = createSelector(
      //input selector all jobs
      selectJobs,
      jobs=&gt;jobs.filter(x=&gt;x.hasBeenPaid !== &quot;PAID&quot;)
  
  )
  export const selectUncompleteJobs = createSelector(
      //input selector all jobs
      selectJobs,
      jobs=&gt;jobs.filter(j=&gt;j.JobCompleted  !==  &quot;COMPLETE&quot;)
  
  )
  
  export const selectCompleteJobs = createSelector(
      //input selector all jobs
      selectJobs,
      jobs=&gt;jobs.filter(j=&gt;j.JobCompleted === &quot;COMPLETE&quot;)
  
  )
  
  
  </code></pre>
  <p>this does improve performance down to 7 seconds instead of 15.</p>
  <p>I'm still looking for further optimization - but that was a big step!</p>