صفّر الحالة بالمفتاح لا بالتأثير | متى لا تحتاج إلى useEffect والبدائل الهندسية الأنظف

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

من أكثر الأخطاء شيوعاً كتابة useEffect(() => { setComment(""); }, [userId]) داخل مكون فرعي لتفريغ المسودة عند الانتقال لطالب أو ملف شخصي آخر؛ إذ يعرض ذلك مسودة المستخدم السابق للحظة فوق ملف المستخدم الجديد قبل مسحها!

الحل الهندسي الأنظف هو تمرير المعرّف لخاصية المفتاح <CommentDraft key={userId} user={activeUser} />؛ فتعاملها React كنسخة مكون جديدة وتصفّر حالتها الداخلية تلقائياً في تصيير واحد.

الصف 2 كود برمجي

HTML

function Workspace() {
  const [studentId, setStudentId] = useState('s1');
  return (
    <MentorNoteBox
      key={studentId}
      studentId={studentId}
    />
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Reset Child State Using key صفّر الحالة بالمفتاح لا بالتأثير

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (متى لا تحتاج إلى useEffect والبدائل الهندسية الأنظف)