Snippet

Immutable Sorting and Chunking of Collection State with Array toSorted

Standard `Array.prototype.sort()` mutates arrays in place, which violates React's immutability principles and can cause subtle rendering bugs. Modern JavaScript provides `Array.prototype.toSorted()`, which returns a brand new sorted shallow copy without altering the original array prop. Combining `toSorted()` with `Array.prototype.slice()` enables clean, immutable pagination and ordering pipelines directly during rendering.

snippet.js

javascript

function ProductCatalog({ items, sortKey, pageIndex, pageSize }) {
  const sortedItems = items.toSorted((a, b) => {
    if (typeof a[sortKey] === 'string') {
      return a[sortKey].localeCompare(b[sortKey]);
    }
    return a[sortKey] - b[sortKey];
  });
 
  const startIndex = pageIndex * pageSize;
  const currentPageItems = sortedItems.slice(startIndex, startIndex + pageSize);
 
  return (
    <ul>
      {currentPageItems.map((product) => (
        <li key={product.id}>{product.title} - ${product.price}</li>
      ))}
    </ul>
  );
}

react

Breakdown

const sortedItems = items.toSorted((a, b) => {

Creates an immutably sorted copy of the collection without mutating the input props array.

return a[sortKey].localeCompare(b[sortKey]);

Performs language-sensitive string comparison for deterministic alphabetical sorting.

const currentPageItems = sortedItems.slice(startIndex, startIndex + pageSize);

Extracts the subset of elements required for the active pagination window.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Immutable Sorting and Chunking of Collection State with Array toSorted

Related