c86c93582e
- Add 8 new skills (62 total, up from 58) - Official Anthropic skills: docx, pdf, pptx, xlsx, brand-guidelines, internal-comms - Vercel Labs skills: react-best-practices, web-design-guidelines - Implement dual-versioning: -official/-anthropic and -community suffixes - Update README with new skill registry and credits - Regenerate skills_index.json (62 skills validated) - Add comprehensive walkthrough.md BREAKING CHANGE: Document skills (docx/pdf/pptx/xlsx) renamed with version suffixes
58 lines
1.7 KiB
Markdown
58 lines
1.7 KiB
Markdown
---
|
|
title: Use toSorted() Instead of sort() for Immutability
|
|
impact: MEDIUM-HIGH
|
|
impactDescription: prevents mutation bugs in React state
|
|
tags: javascript, arrays, immutability, react, state, mutation
|
|
---
|
|
|
|
## Use toSorted() Instead of sort() for Immutability
|
|
|
|
`.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.
|
|
|
|
**Incorrect (mutates original array):**
|
|
|
|
```typescript
|
|
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):**
|
|
|
|
```typescript
|
|
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:
|
|
|
|
```typescript
|
|
// 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
|