‏react-z-form: مدیریت فرم در ری‌اکت بدون re-render

react-z-form یه کتابخانه‌ی مدیریت state فرم برای ری‌اکته که با Zustand ساخته شده. ادعای اصلیش اینه که در مقایسه با Formik و React Hook Form، هم سبک‌تره (حدود ۳KB در مقابل ۹KB و ۱۳KB) و هم re-render کمتری تولید می‌کنه. چطور؟ با «field subscription» — یعنی هر فیلد فقط به تغییرات خودش گوش می‌ده و بقیه‌ی کامپوننت‌ها بی‌خود رندر نمی‌شن.

از نظر فنی، این کتابخانه از useSyncExternalStore ری‌اکت ۱۸ استفاده می‌کنه که یعنی با concurrent mode سازگاره. TypeScript هم first-class citizen هست و type definition کامل داره. برای اعتبارسنجی (validation) هم می‌شه از Zod استفاده کرد، چیزی که Formik نداره.

ساختار کار با این کتابخانه سه‌تا رکن اصلی داره: FormProvider که context فرم رو فراهم می‌کنه، Field که یه render prop component برای هر فیلده، و هوک useForm که کنترل کامل فرم رو می‌ده. یه مثال ساده از فرم لاگین اینطوریه:

<FormProvider form="login" initialValues={{ email: "", password: "" }}>
  <Field name="email" validate={(v) => (!v ? "Email is required" : undefined)}>
    {({ input, meta }) => (
      <div>
        <input {...input} type="email" placeholder="Email" />
        {meta.touched && meta.error && <span>{meta.error}</span>}
      </div>
    )}
  </Field>
</FormProvider>

برای اعتبارسنجی با Zod هم می‌شه از zodField برای سطح فیلد و zodForm برای سطح کل فرم استفاده کرد. به این شکل schema رو یه‌بار تعریف می‌کنی و بهش پاس می‌دی:

const emailSchema = z.string().email("Invalid email address");

<Field name="email" validate={zodField(emailSchema)}>
  {({ input, meta }) => <input {...input} />}
</Field>

هوک useForm دسترسی کامل به state فرم رو می‌ده: مقادیر، خطاها، وضعیت touched/dirty، و همچنین متدهایی مثل setFieldValue، reset، و submitWith برای هندل کردن async submission. یه هوک useField هم هست که نسخه‌ی hook-based همون Field کامپوننته و برای کسایی که render prop دوست ندارن مفیده.

تایمینگ اعتبارسنجی هم قابل تنظیمه — می‌شه گفت که validation روی blur، change، submit، یا ترکیبشون (all که پیش‌فرضه) اجرا بشه. این کنترل دقیق کمک می‌کنه تجربه‌ی کاربری فرم بهتر بشه.

نکات کلیدی:

• حجم ~۳KB در مقابل ~۹KB (RHF) و ~۱۳KB (Formik)
• فقط فیلد تغییرکرده رندر مجدد می‌شه، نه کل فرم
• سازگار با React 18 concurrent mode از طریق useSyncExternalStore
• پشتیبانی از Zod برای اعتبارسنجی schema-based
• هم کامپوننت (Field, FormProvider) و هم hook (useField, useForm) داره
• با هر UI library ای کار می‌کنه: MUI، Chakra، Ant Design، Tailwind