الحالة غير المعدلة والقيم المشتقة

import { useState } from "react";
export default function App() { const [profile, setProfile] = useState({ name: "Mira", stats: { score: 2 } }); return <main><h1>{profile.name}</h1><p>{profile.stats.score}</p><button type="button" onClick={() => setProfile(p => ({ ...p, stats: { ...p.stats, score: p.stats.score + 1 } }))}>Add point</button></main>; }

Mira. Initial score: 2. After Add point: 3.

يستبدل مستويا المسار فتزداد النتيجة من اثنين لثلاثة ويبقى الاسم.

import { useState } from "react";
export default function App() { const [items, setItems] = useState([{ id: "a", amount: 2 }, { id: "b", amount: 3 }]); const total = items.reduce((sum, item) => sum + item.amount, 0); return <main><h1>Total: {total}</h1><button type="button" onClick={() => setItems(xs => xs.filter(x => x.id !== "a"))}>Remove A</button></main>; }

Initial: Total: 5. After Remove A: Total: 3.

يشتق المجموع من المصفوفة ويصبح ثلاثة بعد الحذف دون محدث مجموع آخر.