title: React huge array sorting (5k items)
body: <p>I am getting an array of 5k objects from jsonplaceholder (photos endpoint). And I want to sort it by albumId using a Material-UI select. So the problem is state is not being displayed properly. When I choose 'desc' options my items grid is not being updated, but when I drop the sorting state to it's initial value, the rerender happens and I am getting a sorted by 'desc' order list.</p>
  <p>API link: <a href="http://jsonplaceholder.typicode.com/photos" rel="nofollow noreferrer">json placeholder photos JSON</a></p>
  <pre class="lang-js prettyprint-override"><code>const handleChangeSort = (e: SelectChangeEvent) =&gt; {
    const sort = e.target.value;
  
    setSort(sort);
  };
  
  const handleClearSort = () =&gt; {
    setSort('');
  };
  
  React.useEffect(() =&gt; {
    if (sort) {
      const sortedImages = filteredImages.sort(
        byValue((i) =&gt; i.albumId, byNumber({ desc: sort === 'desc' }))
      );
      setFilteredImages(sortedImages);
    } else {
      setFilteredImages(images);
    }
  
    setPage(1);
  
    /* eslint-disable-next-line */
  }, [sort]);
  
  React.useEffect(() =&gt; {
    console.log('NEW FILTERED IMAGES', filteredImages);
  }, [filteredImages]);
  
  &lt;&gt;
  {!imagesLoading &amp;&amp;
    (filteredImages.length ? (
      &lt;Grid container item spacing={5} xs={12}&gt;
        {filteredImages
          .slice(itemsOnPage * (page - 1), page * itemsOnPage)
          .map((image: Image) =&gt; (
            &lt;Grid item xs={4} key={image.id}&gt;
              &lt;Card&gt;
                &lt;CardHeader title={image.title.slice(0, 20)} /&gt;
                &lt;CardMedia
                  component=&quot;img&quot;
                  height=&quot;100%&quot;
                  image={image.thumbnailUrl}
                  alt={image.title}
                /&gt;
                &lt;CardActions&gt;
                  &lt;Button
                    size=&quot;small&quot;
                    className={classNames(classes.btn, classes.deleteBtn)}
                  &gt;
                    &lt;DeleteIcon /&gt;
                  &lt;/Button&gt;
                  &lt;Button
                    size=&quot;small&quot;
                    className={classNames(classes.btn, classes.previewBtn)}
                  &gt;
                    &lt;PreviewIcon /&gt;
                  &lt;/Button&gt;
                &lt;/CardActions&gt;
              &lt;/Card&gt;
            &lt;/Grid&gt;
          ))}
        &lt;/Grid&gt;
      ) : (
        &lt;Grid item&gt;
          &lt;Typography variant=&quot;body1&quot;&gt;No images were found&lt;/Typography&gt;
       &lt;/Grid&gt;
    ))}
  &lt;/&gt;
  </code></pre>
  <p>Furthermore, the useEffect, that is listening for filteredImages to change is not working. I am not getting the console.log after filteredImages change it's value.</p>
  <p>UPD: Default sorting by Array.sort is not working either</p>