‏TanStack Form: مدیریت فرم‌ها در ری‌اکت

مدیریت فرم‌ها توی ری‌اکت یکی از اون کارهاییه که اول ساده به نظر می‌رسه ولی خیلی سریع پیچیده می‌شه. یه state برای هر input، ولیدیشن، نمایش خطا فقط بعد از submit، پاک کردن خطا موقع تایپ، تقسیم فرم به چند کامپوننت و... همه این‌ها با هم دردسرساز می‌شن. TanStack Form اومده تا این دردسرها رو حل کنه.

برای شروع، یه هوک به اسم useForm داری که بهش defaultValues می‌دی و یه تابع onSubmit. ساختار همین defaultValues هست که شکل داده‌های فرم رو تعریف می‌کنه و از اون لحظه به بعد، همه چیز کاملاً type-safe می‌شه — یعنی حتی name هر فیلد هم autocomplete می‌شه و تایپ‌چک می‌شه:

const form = useForm({
  defaultValues: defaultProduct,
  onSubmit: async ({ value }) => {
    // ...
  },
});

برای رندر هر فیلد از کامپوننت Field استفاده می‌کنی. این کامپوننت هدلسه، یعنی خودش چیزی رندر نمی‌کنه و به جاش از الگوی render function استفاده می‌کنه — یه تابع به عنوان children پاس می‌دی که یه آبجکت field می‌گیره و هر UI دلخواهی رندر می‌کنه:

children={field => (
  <>
    <Input
      value={field.state.value}
      onChange={e => field.handleChange(e.target.value)}
      onBlur={field.handleBlur}
    />
    {!field.state.meta.isValid && <span>{field.state.meta.errors.join(", ")}</span>}
  </>
)}

ولیدیشن هم خیلی منعطفه. می‌تونی مشخص کنی خطا کِی نمایش داده بشه: موقع submit، موقع blur، یا موقع تایپ. مثلاً اگه بخوای فقط بعد از submit خطا نشون بدی:

validators={{
  onSubmit: ({ value }) => {
    if (!value) return "Name is required";
  },
}}

آبجکت field.state.meta یه سری state مفید داره مثل isValid، errors، isTouched، isDirty و isPristine که کمک می‌کنن UI خیلی دقیق‌تر رفتار کنه. مثلاً isTouched وقتی true می‌شه که کاربر روی فیلد کلیک کرده و بعد ازش خارج شده، به همین خاطره که onBlur رو هم باید wire کنی.

برای فیلدهای آرایه‌ای هم TanStack Form راه‌حل خوبی داره. کافیه mode رو روی "array" بذاری، اون‌وقت pushValue و removeValue در اختیارته و می‌تونی روی آیتم‌ها loop بزنی و برای هر کدوم فیلد جداگانه رندر کنی. نام‌گذاری nested هم به شکل metadata[0].name کاملاً پشتیبانی و تایپ‌چک می‌شه:

name={`metadata[${idx}].name`}

یه نکته‌ی مهم اینه که form.getFieldValue() ری‌اکتیو نیست — یعنی اگه بخوای مقدار یه فیلد رو ببینی و بر اساسش UI رو آپدیت کنی (مثلاً وقتی قیمت بیشتر از ۵۰ شد، فیلد توضیحات رو اجباری کن)، باید از روش‌های دیگه‌ای که کتابخونه ارائه می‌ده استفاده کنی تا پرفورمنس حفظ بشه.

در کل TanStack Form یه انتخاب جدی و بالغه برای کسایی که می‌خوان فرم‌های پیچیده رو با تایپ‌سیفتی کامل و کنترل کامل روی UI مدیریت کنن، بدون اینکه به یه سیستم رندر خاص وابسته بشن.

نکات کلیدی:

• هوک useForm با defaultValues شروع می‌کنه و از اون ساختار برای type-safety کامل استفاده می‌کنه
• کاملاً هدلسه — هر UI دلخواهی می‌تونی رندر کنی
• ولیدیشن رو می‌شه در مراحل مختلف (onSubmit، onChange، onBlur) تنظیم کرد
• state های کامل فیلد مثل isTouched، isDirty، isPristine در دسترسن
• فیلدهای آرایه‌ای با mode="array" و متدهای pushValue و removeValue پشتیبانی می‌شن
• name های nested مثل metadata[0].name کاملاً تایپ‌چک می‌شن
• getFieldValue ری‌اکتیو نیست و برای مقادیر وابسته باید از APIهای خاص کتابخونه استفاده کرد