كيفية بناء نماذج React بسهولة باستخدام react-hook-form

مقدمة: لماذا تحتاج إلى مكتبة متخصصة لإدارة النماذج في React؟

إنشاء النماذج التفاعلية داخل تطبيقات React قد يبدو بسيطاً في البداية، لكنه يتحول سريعاً إلى مهمة مرهقة عند إضافة التحقق من صحة البيانات، وإدارة الأخطاء، وتحسين تجربة المستخدم. لهذا السبب يلجأ كثير من المطورين إلى مكتبات متخصصة تختصر الوقت وتقلل كمية الشيفرة المطلوبة.

من بين أبرز هذه المكتبات تبرز react-hook-form بوصفها خياراً عملياً يجمع بين البساطة والأداء والمرونة. فهي تساعدك على بناء نماذج غنية بالمزايا دون الدخول في تعقيدات غير ضرورية.

ما هي مكتبة react-hook-form؟

مكتبة react-hook-form هي أداة مخصصة لإدارة النماذج داخل تطبيقات React. تتيح لك تسجيل الحقول، وتنفيذ التحقق من صحة الإدخالات، والتعامل مع الإرسال والأخطاء، مع الحفاظ على أداء جيد وشيفرة نظيفة.

أبرز ما يميزها:

• تقليل الشيفرة المتكررة.
• سهولة دمج التحقق من صحة الحقول.
• تحسين تجربة المستخدم عبر عرض الأخطاء بشكل واضح.
• دعم أنماط متعددة لتنفيذ التحقق مثل onBlur وonChange وonSubmit.

إنشاء نموذج تسجيل بسيط في React

لنأخذ مثالاً عملياً على نموذج تسجيل مستخدم جديد يحتوي على ثلاثة حقول: اسم المستخدم، والبريد الإلكتروني، وكلمة المرور.

import React from "react";

const styles = {
  container: {
    width: "80%",
    margin: "0 auto",
  },
  input: {
    width: "100%",
  },
};

export default function Signup() {
  return (
    <div style={styles.container}>
      <h4>Sign up</h4>
      <form>
        <input placeholder="Username" style={styles.input} />
        <input placeholder="Email" style={styles.input} />
        <input placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

هذا النموذج يعمل من حيث الواجهة، لكنه لا يزال يفتقر إلى إدارة القيم والتحقق من صحة البيانات.

كيفية تثبيت react-hook-form

بعد تجهيز مشروع React، يمكنك تثبيت المكتبة بالأمر التالي:

npm i react-hook-form

بعد التثبيت، تصبح جاهزاً لاستخدام الخطاف useForm وإضافة منطق النموذج بطريقة أسهل بكثير.

استخدام الخطاف useForm داخل النموذج

لبدء العمل مع react-hook-form، نحتاج إلى استدعاء useForm. هذا الخطاف يعيد لنا مجموعة من الأدوات المهمة، ومن أبرزها الدالة register المستخدمة لربط الحقول بالنموذج.

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form>
        <input ref={register} placeholder="Username" style={styles.input} />
        <input ref={register} placeholder="Email" style={styles.input} />
        <input ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

وظيفة register هي تسجيل كل حقل داخل نظام إدارة النموذج حتى تتمكن المكتبة من قراءة قيمته والتحقق منها عند الحاجة.

أهمية الخاصية name لكل حقل

لكي تعمل register كما ينبغي، يجب تعيين الخاصية name لكل حقل. هذه الخاصية هي المفتاح الذي تستخدمه المكتبة لتجميع القيم داخل كائن واحد عند إرسال النموذج.

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form>
        <input name="username" ref={register} placeholder="Username" style={styles.input} />
        <input name="email" ref={register} placeholder="Email" style={styles.input} />
        <input name="password" ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

عند إرسال النموذج، ستحصل على كائن يحتوي على خصائص مثل username وemail وpassword، وذلك تبعاً لأسماء الحقول التي حددتها.

إرسال النموذج باستخدام handleSubmit

بعد تسجيل الحقول، نحتاج إلى معالجة عملية الإرسال. هنا يأتي دور handleSubmit، وهي دالة يوفرها useForm لتجميع البيانات وتنفيذ التحقق منها قبل تمريرها إلى الدالة الخاصة بك.

function App() {
  const { register } = useForm();

  function onSubmit() {}

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={onSubmit}>
        <input name="username" ref={register} placeholder="Username" style={styles.input} />
        <input name="email" ref={register} placeholder="Email" style={styles.input} />
        <input name="password" ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

الصيغة السابقة ليست كافية وحدها، لأننا نحتاج إلى تمرير الدالة onSubmit عبر handleSubmit حتى تتولى المكتبة جمع البيانات والتحقق منها.

function App() {
  const { register, handleSubmit } = useForm();

  function onSubmit(data) {
    console.log(data);
    // { username: 'test', email: 'test', password: 'test' }
  }

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input name="username" ref={register} placeholder="Username" style={styles.input} />
        <input name="email" ref={register} placeholder="Email" style={styles.input} />
        <input name="password" ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

بهذه الطريقة، تستقبل الدالة onSubmit كائناً باسم data يحتوي على قيم الحقول كلها.

إضافة التحقق من صحة الحقول عبر register

من أقوى مزايا react-hook-form أن التحقق من صحة الحقول يتم مباشرة من خلال تمرير كائن إعدادات إلى register. وهذا يجعل منطق التحقق واضحاً وقريباً من الحقل نفسه.

جعل الحقل مطلوباً وتحديد الطول الأدنى والأقصى

إذا أردت فرض إدخال اسم مستخدم لا يقل عن 6 أحرف ولا يزيد على 20 حرفاً، يمكنك كتابة ما يلي:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
  })}
  style={styles.input}
  placeholder="Username"
/>

أما إذا كان الحقل رقمياً، فبدلاً من minLength وmaxLength يمكنك استخدام min وmax.

استخدام pattern مع التعبيرات النمطية

في بعض الحالات، تحتاج إلى فرض نمط محدد على المدخلات. على سبيل المثال، إذا أردت السماح في اسم المستخدم بالأحرف الإنجليزية فقط، فيمكنك استخدام تعبير نمطي عبر pattern:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
    pattern: /^[A-Za-z]+$/i,
  })}
  style={styles.input}
  placeholder="Username"
/>

هذا النمط يسمح بإدخال الأحرف فقط، ويمنع الأرقام والرموز غير المرغوبة.

التحقق المخصص باستخدام validate

عندما تحتاج إلى منطق تحقق أكثر مرونة، يمكنك الاعتماد على الخاصية validate. فهي تقبل دالة مخصصة تعيد true إذا كانت القيمة صحيحة، أو false إذا كانت غير صالحة.

في المثال التالي، نتحقق من أن البريد الإلكتروني صالح باستخدام الدالة isEmail من مكتبة validator:

<input
  name="email"
  ref={register({
    required: true,
    validate: (input) => isEmail(input),
    // returns true if valid
  })}
  style={styles.input}
  placeholder="Email"
/>

هذا النوع من التحقق مفيد عندما تكون قواعد العمل أكثر تعقيداً من مجرد طول النص أو شكله.

التحقق من كلمة المرور

بالنسبة إلى كلمة المرور، يمكن الاكتفاء بجعلها مطلوبة مع حد أدنى للطول:

<input
  name="password"
  ref={register({
    required: true,
    minLength: 6,
  })}
  style={styles.input}
  placeholder="Password"
/>

وبالطبع، في التطبيقات الحقيقية يُفضَّل إضافة شروط أقوى مثل وجود أحرف كبيرة وصغيرة وأرقام ورموز، بحسب سياسة الأمان المعتمدة.

كيفية عرض أخطاء التحقق للمستخدم

عدم إرسال النموذج عند وجود خطأ ليس كافياً وحده. المستخدم يحتاج إلى تغذية راجعة واضحة تساعده على تصحيح الإدخالات بسرعة. لهذا توفر المكتبة الكائن errors الذي يحتوي على الحقول غير الصالحة.

function App() {
  const { register, handleSubmit, errors } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register({
            required: true,
            minLength: 6,
            maxLength: 20,
            pattern: /^[A-Za-z]+$/i,
          })}
          style={{ ...styles.input, borderColor: errors.username && "red" }}
          placeholder="Username"
        />

        <input
          name="email"
          ref={register({
            required: true,
            validate: (input) => isEmail(input),
          })}
          style={{ ...styles.input, borderColor: errors.email && "red" }}
          placeholder="Email"
        />

        <input
          name="password"
          ref={register({
            required: true,
            minLength: 6,
          })}
          style={{ ...styles.input, borderColor: errors.password && "red" }}
          placeholder="Password"
        />

        <button type="submit" disabled={formState.isSubmitting}>
          Submit
        </button>
      </form>
    </div>
  );
}

في هذا المثال، يتم تغيير لون إطار الحقل إلى الأحمر إذا كان يحتوي على خطأ. ويمكنك تطوير هذه الفكرة أكثر عبر عرض رسائل مخصصة أسفل كل حقل.

أمثلة مفيدة لتحسين تجربة المستخدم عند عرض الأخطاء

• عرض رسالة مثل: اسم المستخدم يجب أن يكون بين 6 و20 حرفاً.
• إظهار رسالة توضح أن البريد الإلكتروني غير صالح.
• تنبيه المستخدم إلى أن كلمة المرور قصيرة جداً.
• تمييز الحقول الخاطئة بصرياً مع المحافظة على وضوح التصميم.

أنماط التحقق في react-hook-form

بشكل افتراضي، يتم تحديث errors بعد محاولة إرسال النموذج. لكن يمكنك تغيير هذا السلوك من خلال تمرير كائن إعدادات إلى useForm وتحديد النمط المناسب للتحقق.

const { register, handleSubmit, errors } = useForm({
  mode: "onBlur",
});

الأنماط المتاحة تشمل:

• onBlur: التحقق يحدث عندما يغادر المستخدم الحقل.
• onChange: التحقق يحدث أثناء الكتابة مباشرة.
• onSubmit: التحقق يحدث عند إرسال النموذج فقط.

اختيار النمط المناسب يعتمد على نوع النموذج وتجربة الاستخدام التي تريد تقديمها. غالباً ما يكون onBlur مناسباً للنماذج التقليدية لأنه يوازن بين التفاعل الفوري وعدم الإزعاج أثناء الكتابة.

أدوات إضافية لإدارة الأخطاء يدوياً

توفر المكتبة أيضاً أدوات مثل setError وclearError، وهي مفيدة عندما تريد فرض خطأ معين أو إزالته يدوياً داخل منطق مخصص، مثل التحقق من استجابة الخادم بعد الإرسال.

تعطيل زر الإرسال باستخدام formState

من الأدوات المهمة التي يقدمها useForm الكائن formState. يتيح هذا الكائن معرفة حالة النموذج، مثل ما إذا كان المستخدم قد تفاعل مع الحقول، أو ما إذا كانت عملية الإرسال جارية حالياً.

من الاستخدامات العملية لـ formState تعطيل زر الإرسال أثناء تنفيذ الطلب، حتى لا يقوم المستخدم بإرسال النموذج أكثر من مرة دون داعٍ.

يمكنك فعل ذلك عبر الخاصية formState.isSubmitting:

disabled={formState.isSubmitting}

هذه الخطوة البسيطة تحسن تجربة الاستخدام وتقلل الأخطاء الناتجة عن التكرار غير المقصود.

أفضل ممارسات عند بناء نماذج React

• استخدم أسماء واضحة للحقول عبر الخاصية name.
• اجعل رسائل الخطأ مفهومة للمستخدم وغير تقنية قدر الإمكان.
• لا تكتفِ بالتحقق من الواجهة الأمامية فقط، بل تحقق أيضاً على مستوى الخادم.
• قلل عدد الحقول إلى الحد الضروري لتسهيل الإكمال وزيادة معدل التحويل.
• اختبر النموذج على الجوال للتأكد من سهولة الاستخدام وسرعة الإدخال.
• احرص على وضوح الأزرار وحالات التحميل والتعطيل.

لماذا تعد react-hook-form خياراً عملياً؟

إذا كنت تبحث عن طريقة فعالة لإدارة النماذج في React دون تضخم في الشيفرة، فإن react-hook-form تقدم توازناً ممتازاً بين سهولة الاستخدام والقدرات المتقدمة. فهي لا تسهل التحقق من المدخلات فحسب، بل تساعدك أيضاً على بناء تجربة استخدام أكثر سلاسة واحترافية.

كما أن بنيتها الخفيفة تجعلها مناسبة لمشاريع صغيرة وكبيرة على حد سواء، خصوصاً عندما تحتاج إلى نماذج متعددة أو متقدمة داخل التطبيق.

الخلاصة التقنية

مكتبة react-hook-form ليست مجرد أداة لتقليل الشيفرة، بل هي حل عملي لبناء نماذج موثوقة وسهلة الصيانة داخل تطبيقات React. من الناحية التقنية، أبرز قوتها تكمن في تبسيط تسجيل الحقول، وإدارة الأخطاء، والتحكم في حالة الإرسال، مع أداء جيد وتجربة تطوير مرنة. وإذا كنت تطور واجهات تعتمد كثيراً على النماذج، فاعتماد هذه المكتبة يمكن أن يوفر عليك وقتاً كبيراً ويمنح مشروعك بنية أنظف وأكثر احترافية.