شرح صفوف ومحتوى الفقرة
انتبه لتفصيل شائع: إذا قرأت دالة الحدث مصفوفة الحالة مباشرة عبر كتابة setTasks([...tasks, next])، فستضطر لإدراج [tasks] في مصفوفة اعتماديات useCallback، مما يعيد إنشاء الدالة عند كل تعديل على المصفوفة!
أما عند استخدام دالة التحديث الوظيفية setTasks((prev) => [...prev, next])، فلا تعود الدالة بحاجة لقراءة المتغير الخارجي، وتفرغ مصفوفة الاعتماديات إلى [] فيبقى مرجع الدالة ثابتاً طوال عمر المكون:
HTML
const toggleDone = useCallback((id) => {
setItems((prev) =>
prev.map((it) =>
it.id === id ? { ...it, done: !it.done } : it
)
);
}, []); // Zero state dependencies!