كيفية بناء نماذج جميلة في React باستخدام Chakra UI وReact Hook Form

مقدمة: لماذا تمثل النماذج تحدياً في تطبيقات React؟

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

هذه الطريقة فعالة، لكنها قد تصبح مرهقة عندما يحتوي النموذج على عدة حقول. إذ تحتاج إلى تتبع قيمة كل حقل باستخدام onChange وربطها مع useState()، ثم التعامل مع الإرسال عبر onSubmit أو onClick، وبعدها إضافة قواعد التحقق من صحة البيانات وإظهار رسائل الخطأ المناسبة.

كل ذلك يعني كتابة الكثير من الشيفرة المتكررة. وهنا تظهر فائدة مكتبة React Hook Form التي تختصر هذه المهام في واجهة بسيطة وسريعة، مع تحسين ملحوظ في الأداء. وعند دمجها مع Chakra UI، يصبح من السهل إنشاء نماذج أنيقة وعملية في الوقت نفسه.

ما الذي سنتعلمه في هذا الدليل؟

• ما هي مكتبة React Hook Form؟
• كيف تؤثر على أداء تطبيقات React؟
• كيفية التقاط بيانات المستخدم من النموذج.
• إضافة التحقق من صحة الحقول بطريقة مرنة.
• تحسين الواجهة وتجربة الاستخدام عبر Chakra UI.

ما هي مكتبة React Hook Form؟

تُعد React Hook Form مكتبة خفيفة ومرنة لإدارة النماذج داخل تطبيقات React. وهي تتولى مهام أساسية مثل:

• جمع بيانات المستخدم.
• إدارة حالة الحقول.
• تنفيذ التحقق من صحة البيانات.
• تقليل عدد مرات إعادة التصيير re-renders.

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

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

كيف تؤثر React Hook Form على الأداء؟

في الإصدارات السابقة من المكتبة، كان استخدام الخاصية ref جزءاً شائعاً من آلية تسجيل الحقول وإدارتها. مثال على ذلك:

<input type="password" placeholder="Password" ref={register} />

الفكرة الأساسية هنا أن المكتبة تميل إلى استخدام نهج uncontrolled inputs بدلاً من تحديث الحالة مع كل ضغطة مفتاح. هذا الأسلوب يقلل الضغط على شجرة المكونات، ويعزل التغييرات ضمن الحقول نفسها قدر الإمكان، ما يؤدي إلى:

• تقليل عدد مرات إعادة التصيير.
• تسريع تحميل المكونات mounting.
• تحسين تجربة الاستخدام في النماذج الكبيرة.

إذا كنت تعمل على واجهة تحتوي على عدد كبير من الحقول، فهذه الميزة وحدها تجعل React Hook Form خياراً يستحق الاعتماد.

كيفية الحصول على بيانات المستخدم من النموذج

تثبيت المكتبة

ابدأ أولاً بتثبيت المكتبة داخل مشروعك:

npm install react-hook-form

استيراد الدالة useForm

بعد التثبيت، استورد useForm من الحزمة:

import { useForm } from "react-hook-form";

استخراج الأدوات الأساسية

بعد ذلك، استخرج القيم الأساسية التي ستستخدمها في النموذج:

const { register, handleSubmit, formState: { errors } } = useForm();

• register: لتسجيل الحقول وربطها بالنموذج.
• handleSubmit: لمعالجة الإرسال.
• errors: للوصول إلى أخطاء التحقق من صحة البيانات.

إنشاء نموذج بسيط

<form onSubmit={handleSubmit(onSubmit)}>
  <input type="text" placeholder="First Name" {...register("firstname")} />
  <input type="submit" />
</form>

عند إرسال النموذج، سيتم تمرير البيانات إلى الدالة onSubmit:

const onSubmit = data => console.log(data);

النتيجة ستكون كائناً object يحتوي على اسم الحقل وقيمته، مثل firstname.

إضافة عدة حقول

يمكنك بسهولة توسيع النموذج ليشمل أكثر من حقل:

<form onSubmit={handleSubmit(onSubmit)}>
  <input type="text" placeholder="First Name" {...register("firstname")} />
  <input type="text" placeholder="Last Name" {...register("lastname")} />
  <input type="password" placeholder="Your password" {...register("password")} />
  <input type="submit" />
</form>

وعند الإرسال، ستحصل على كائن يحتوي على القيم الثلاث معاً.

عرض البيانات داخل الواجهة

بدلاً من إرسال البيانات إلى قاعدة بيانات في هذا المثال، يمكن عرضها للمستخدم باستخدام useState():

const [data, setData] = useState();

const onSubmit = (data) => {
  setData(data);
};

بعد ذلك، يمكن إنشاء مكون جديد باسم Stats.js لعرض البيانات بطريقة منظمة باستخدام مكونات Chakra UI:

import { HStack, Stack, Stat, StatHelpText, StatLabel } from "@chakra-ui/react";
import React from "react";

export default function Stats(props) {
  return (
    <Stat mt={5}>
      <Stack p={4} borderWidth="3px" borderRadius="md" direction="column" align="flex-start">
        <HStack>
          <StatLabel>Name: {props.Firstname}</StatLabel>
          <StatLabel>{props.Lastname}</StatLabel>
        </HStack>
        <StatHelpText>Password: {props.Password}</StatHelpText>
      </Stack>
    </Stat>
  );
}

ثم استدعِ هذا المكون داخل الملف الرئيسي:

import Stats from "./Stats";

{data && (
  <Stats
    Firstname={data.firstname}
    Lastname={data.lastname}
    Password={data.password}
  />
)}

لن يظهر المكون إلا إذا كانت قيمة data موجودة بالفعل.

كيفية إضافة التحقق من صحة النموذج

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

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

أهداف التحقق من صحة النماذج تتلخص في:

• الحصول على بيانات صحيحة وذات معنى.
• تحسين أمان المستخدم عبر فرض كلمات مرور قوية.
• الحفاظ على قاعدة بيانات نظيفة ومنظمة.

إضافة شرط إلزامي لحقل الاسم

تتيح لك الدالة register تسجيل الحقول وإرفاق قواعد التحقق معها:

<input
  type="text"
  placeholder="First name"
  {...register("firstname", { required: true })}
/>

لكن الأفضل هو إظهار رسالة مفهومة للمستخدم بدلاً من الاكتفاء بالقيمة true:

<input
  type="text"
  placeholder="First name"
  {...register("firstname", {
    required: "Please enter your first name"
  })}
/>

{errors.firstname && <p>{errors.firstname.message}</p>}

إذا احتوى الكائن errors على خطأ مرتبط بالحقل، فستظهر الرسالة مباشرة للمستخدم.

فرض حد أدنى لطول كلمة المرور

يمكنك أيضاً إضافة تحقق أكثر تقدماً، مثل فرض حد أدنى لطول كلمة المرور:

<Input
  type="password"
  placeholder="Password"
  {...register("password", {
    required: "Please enter Password",
    minLength: {
      value: 8,
      message: "Too short"
    }
  })}
/>

ثم عرض رسالة الخطأ بنفس الأسلوب:

{errors.password && <p>{errors.password.message}</p>}

الميزة الجميلة هنا أن React Hook Form يتفاعل مع تغييرات المستخدم بشكل مباشر، لذلك تظهر التنبيهات في الوقت المناسب وتُحدّث رسائل الخطأ ديناميكياً دون تعقيد إضافي.

تحسين الواجهة وتجربة الاستخدام باستخدام Chakra UI

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

استبدال الحقول التقليدية بمكونات Chakra UI

بدلاً من استخدام العنصر <input /> التقليدي، يمكن الاعتماد على المكون Input:

import { Input } from "@chakra-ui/react";

كما يمكن استيراد VStack وButton لتنسيق النموذج:

<VStack>
  <Input
    type="text"
    placeholder="First name"
    {...register("firstname", {
      required: "Please enter first name",
      minLength: 3,
      maxLength: 80
    })}
  />

  <Input
    type="text"
    placeholder="Last name"
    {...register("lastname", {
      required: "Please enter Last name",
      minLength: 3,
      maxLength: 100
    })}
  />

  <Input
    type="password"
    placeholder="Password"
    {...register("password", {
      required: "Please enter Password",
      minLength: {
        value: 8,
        message: "Too short"
      }
    })}
  />

  <Button
    borderRadius="md"
    bg="cyan.600"
    _hover={{ bg: "cyan.200" }}
    variant="ghost"
    type="submit"
  >
    Submit
  </Button>
</VStack>

الخصائص المستخدمة في Button ومختلف مكونات Chakra UI قريبة جداً من خصائص CSS، لذلك يسهل على المطورين الانتقال إليها بسرعة.

إظهار رسائل الخطأ عبر مكون تنبيهي مخصص

لتحسين تجربة المستخدم، يمكن إنشاء مكون مستقل لعرض الأخطاء، مثل AlertPop.js:

import { Alert, AlertIcon, AlertTitle } from "@chakra-ui/react";

export default function AlertPop(props) {
  return (
    <Alert status="error">
      <AlertIcon />
      <AlertTitle mr={2}>{props.title}</AlertTitle>
    </Alert>
  );
}

ثم استخدمه أسفل كل حقل حسب نوع الخطأ:

{errors.firstname && <AlertPop title={errors.firstname.message} />}
{errors.lastname && <AlertPop title={errors.lastname.message} />}
{errors.password && <AlertPop title={errors.password.message} />}

بهذه الطريقة يحصل المستخدم على تنبيه بصري واضح ومباشر عند إدخال بيانات غير صالحة.

إظهار رسالة نجاح عند إرسال النموذج

يمكنك أيضاً استخدام useToast من Chakra UI لإظهار رسالة نجاح بعد الإرسال:

import { useToast } from "@chakra-ui/react";

const toast = useToast();

const onSubmit = (data) => {
  toast({
    title: "Submitted!",
    status: "success",
    duration: 3000,
    isClosable: true
  });

  setData(data);
};

هذا النوع من التغذية الراجعة الفورية يعزز ثقة المستخدم ويجعله متأكداً من نجاح العملية.

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

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

لماذا يعد الجمع بين React Hook Form وChakra UI خياراً ممتازاً؟

عند الجمع بين المكتبتين، تحصل على مزيج متوازن بين الأداء الجيد والتجربة البصرية الأنيقة. فالأولى تقلل التعقيد البرمجي وتدير التحقق من الحقول بكفاءة، بينما توفر الثانية نظام مكونات جاهزاً يساعدك على بناء واجهات متسقة وسهلة التطوير.

هذا التكامل مناسب بشكل خاص في الحالات التالية:

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

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

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