Immutability
اللاتحوير (Immutability)
Definition
The principle of not modifying data in place — creating new copies with changes instead of altering the original.
مبدأ عدم تعديل البيانات في مكانها — إنشاء نسخ جديدة مع التغييرات بدلاً من تغيير الأصل.
Why It Matters
Mutating React state directly is one of the most common bugs beginners make. `project.title = 'New'` won't trigger a re-render — `setProject({ ...project, title: 'New' })` will.
تحوير حالة React مباشرةً هو أحد أكثر الأخطاء شيوعًا للمبتدئين. `project.title = 'New'` لن يُشغّل إعادة التصيير — `setProject({ ...project, title: 'New' })` سيفعل.
Full Definition
Example Usage
“// WRONG: terms[0].difficulty = 'advanced'; // RIGHT: setTerms(terms.map(t => t.slug === slug ? { ...t, difficulty: 'advanced' } : t))”
“// خطأ: terms[0].difficulty = 'advanced'; // صحيح: setTerms(terms.map(t => t.slug === slug ? { ...t, difficulty: 'advanced' } : t))”
AI Builder Tips
Avoid these mistakes when using Immutability:
Pushing to a state array directly: `items.push(x)` — React won't detect this change
Thinking spreading is deep clone — nested objects still share references
Sign in to unlock guided AI explanations from AI Teacher.
Generate a Prompt
Copy this prompt and use it directly with any AI model — no setup needed.
Help me build a project using Immutability. Explain: 1. What is Immutability and why it matters 2. The core architecture and required tools 3. Step-by-step implementation plan 4. Common mistakes to avoid: Pushing to a state array directly: `items.push(x)` — React won't detect this change, Thinking spreading is deep clone — nested objects still share references 5. Best practices and production tips