Skip to main content

js-tosorted-immutable

Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere.

معلومات المصدر

المستودع
TheOrcDev/8bitcn-ui
آخر نشاط في المصدر
١٦ يناير ٢٠٢٦ في ٠٩:٠٩
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٢٬٠٥٠
التفرعات
١٢١

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
name
js-tosorted-immutable
description
Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere.
## 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):** ```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
عرض على GitHub