Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use toSorted() Instead of sort() for Immutability
6 
7`.sort()` mutates the array in place, which can cause bugs with React state and props. Use `.toSorted()` to create a new sorted array without mutation.
8 
9**Incorrect (mutates original array):**
10 
11```typescript
12function UserList({ users }: { users: User[] }) {
13  // Mutates the users prop array!
14  const sorted = useMemo(
15    () => users.sort((a, b) => a.name.localeCompare(b.name)),
16    [users]
17  )
18  return <div>{sorted.map(renderUser)}</div>
19}
20```
21 
22**Correct (creates new array):**
23 
24```typescript
25function UserList({ users }: { users: User[] }) {
26  // Creates new sorted array, original unchanged
27  const sorted = useMemo(
28    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
29    [users]
30  )
31  return <div>{sorted.map(renderUser)}</div>
32}
33```
34 
35**Why this matters in React:**
36 
371. Props/state mutations break React's immutability model - React expects props and state to be treated as read-only
382. Causes stale closure bugs - Mutating arrays inside closures (callbacks, effects) can lead to unexpected behavior
39 
40**Browser support (fallback for older browsers):**
41 
42`.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
43 
44```typescript
45// Fallback for older browsers
46const sorted = [...items].sort((a, b) => a.value - b.value)
47```
48 
49**Other immutable array methods:**
50 
51- `.toSorted()` - immutable sort
52- `.toReversed()` - immutable reverse
53- `.toSpliced()` - immutable splice
54- `.with()` - immutable element replacement
55