mcpField
J
js-tosorted-immutable

js-tosorted-immutable

github.com/theorcdevDevelopment2.1k35 installsUpdated 2d ago
Repository

About js-tosorted-immutable

A coding skill for React developers that recommends immutable array operations, especially `toSorted()`, to avoid mutating props or state. It also outlines immutable alternatives for reversing, splicing, and replacing array elements.

Key features

  1. 01Sort arrays without mutation
  2. 02Use immutable reverse, splice, and replacement methods
  3. 03Avoid changing React props and state
  4. 04Use a spread-copy fallback for older environments

Use cases

  1. 01Sorting a list derived from React props
  2. 02Avoiding array mutation in React state
  3. 03Supporting environments without `toSorted()`

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill js-tosorted-immutable

After installing, type/js-tosorted-immutablein Claude Code to confirm it loaded.

Details

From the project README

Use toSorted() Instead of sort() for Immutability

.sort() mutates the array in place, which can cause bugs with React Use .toSorted() to create a new sorted array without state and props. mutation.

Incorrect (mutates original array):

function UserList({ users }: { users: User[] }) {
  // Mutates the users prop array!
  const sorted = useMemo(
    () => users.sort((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

Correct (creates new array):

function UserList({ users }: { users: User[] }) {
  // Creates new sorted array, original unchanged
  const sorted = useMemo(
    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

Why this matters in React:

  1. Props/state mutations break React's immutability model - React expects props and state to be treated as read-only
  2. Causes stale closure bugs - Mutating arrays inside closures (callbacks, effects) can lead to unexpected behavior

Browser support (fallback for older browsers):

.toSorted() is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:

// Fallback for older browsers
const sorted = [...items].sort((a, b) => a.value - b.value)

Other immutable array methods:

  • .toSorted() - immutable sort
  • .toReversed() - immutable reverse
  • .toSpliced() - immutable splice
  • .with() - immutable element replacement

Comments

Markdown supported