فرض کنید صفحهٔ ویرایش کاربر دارید و با عوض‌شدن کاربر انتخاب‌شده، فیلدهای فرم باید خالی/ریست شوند. بسیاری از ما برای این کار یک useEffect می‌نویسیم؛ اما ری‌اکت راه ساده‌تری دارد: key.
چطور کار می‌کند؟
ری‌اکت هویت کامپوننت را از روی نوع و key آن تشخیص می‌دهد. وقتی key عوض شود، نمونهٔ قبلی دور ریخته می‌شود و نمونهٔ تازه با state اولیه ساخته می‌شود.
function Page({ userId }) {
return <EditForm key={userId} userId={userId} />;
}
function EditForm({ userId }) {
const [name, setName] = useState("");
// با هر userId جدید، name دوباره خالی شروع می‌شود
return <input value={name} onChange={e => setName(e.target.value)} />;
}کجا به کار می‌آید؟
- فرم‌ها و ویرایشگرها هنگام عوض‌شدن رکورد.
- چت یا کامنت که با تغییر گفت‌وگو باید خالی شود.
- ریست کردن انیمیشن یا ویجت داخلی که state دارد.
توجه کنید که ریست‌کردن یعنی ساخت دوبارهٔ کل زیردرخت؛ برای کامپوننت‌های سنگین هزینه دارد. و هرگز از اندیس آرایه یا Math.random() به‌عنوان key در لیست‌ها استفاده نکنید.
