React useFormState: إتقان التعامل مع النماذج لتحسين تجارب المستخدم

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

ما هو React useFormState؟

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

الميزات والفوائد الرئيسية:

• إدارة مبسطة للحالة: يركز حالة النموذج ومنطق التحديث، مما يقلل من التعليمات البرمجية المتكررة ويحسن قابلية قراءة الكود.
• التكامل مع إجراءات الخادم: يتكامل بسلاسة مع إجراءات خادم React، مما يتيح لك التعامل مع عمليات إرسال النماذج والتحقق من صحتها على الخادم.
• التحسين التدريجي: يتيح التحسين التدريجي من خلال السماح للنماذج بالعمل حتى بدون JavaScript، مع توفير وظائف محسنة عند تمكين JavaScript.
• أداء محسن: يقلل من المعالجة من جانب العميل عن طريق التعامل مع منطق النموذج على الخادم، مما يؤدي إلى إرسال أسرع للنماذج وتحسين أداء التطبيق.
• إمكانية الوصول: يسهل إنشاء نماذج يمكن الوصول إليها من خلال توفير آليات للتعامل مع الأخطاء وتقديم ملاحظات للمستخدمين ذوي الإعاقة.

فهم خطاف useFormState

يأخذ خطاف useFormState وسيطتين:

1. إجراء الخادم (Server Action): دالة سيتم تنفيذها عند إرسال النموذج. عادةً ما تتعامل هذه الدالة مع التحقق من صحة النموذج ومعالجة البيانات وتحديثات قاعدة البيانات.
2. الحالة الأولية (Initial State): القيمة الأولية لحالة النموذج. يمكن أن تكون هذه أي قيمة JavaScript، مثل كائن أو مصفوفة أو قيمة أولية.

يعيد الخطاف مصفوفة تحتوي على قيمتين:

1. حالة النموذج (Form State): القيمة الحالية لحالة النموذج.
2. إجراء النموذج (Form Action): دالة تقوم بتمريرها إلى الخاصية action الخاصة بعنصر form. تقوم هذه الدالة بتشغيل إجراء الخادم عند إرسال النموذج.

مثال أساسي:

دعنا نفكر في مثال بسيط لنموذج اتصال يسمح للمستخدمين بإرسال أسمائهم وعناوين بريدهم الإلكتروني.

// إجراء الخادم (مثال - يجب تعريفه في مكان آخر)
async function submitContactForm(prevState, formData) {
  // التحقق من صحة بيانات النموذج
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'يرجى ملء جميع الحقول.' };
  }

  // معالجة بيانات النموذج (على سبيل المثال، إرسال بريد إلكتروني)
  try {
    // محاكاة إرسال بريد إلكتروني
    await new Promise(resolve => setTimeout(resolve, 1000)); // محاكاة عملية غير متزامنة
    return { message: 'شكرا لك على إرسالك!' };
  } catch (error) {
    return { message: 'حدث خطأ. يرجى المحاولة مرة أخرى في وقت لاحق.' };
  }
}

// مكون React
'use client'; // مهم لإجراءات الخادم

import { useFormState } from 'react-dom';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, { message: null });

  return (
    

      الاسم:
      



      البريد الإلكتروني:
      



      إرسال

      {state?.message && 
{state.message}
}
    
  );
}

export default ContactForm;

في هذا المثال، دالة submitContactForm هي إجراء الخادم. تتلقى الحالة السابقة وبيانات النموذج كوسائط. تتحقق من صحة بيانات النموذج، وإذا كانت صالحة، تعالج البيانات وتعيد كائن حالة جديدًا مع رسالة نجاح. إذا كانت هناك أخطاء، فإنها تعيد كائن حالة جديدًا مع رسالة خطأ. يدير خطاف useFormState حالة النموذج ويوفر دالة formAction، التي يتم تمريرها إلى الخاصية action لعنصر form. عند إرسال النموذج، يتم تنفيذ دالة submitContactForm على الخادم، ويتم تحديث الحالة الناتجة في المكون.

تقنيات متقدمة لاستخدام useFormState

1. التحقق من صحة النموذج:

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

async function validateForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  let errors = {};

  if (!name) {
    errors.name = 'الاسم مطلوب.';
  }

  if (!email) {
    errors.email = 'البريد الإلكتروني مطلوب.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'صيغة البريد الإلكتروني غير صالحة.';
  }

  if (Object.keys(errors).length > 0) {
    return { errors: errors };
  }

  // معالجة بيانات النموذج (على سبيل المثال، الحفظ في قاعدة البيانات)
  return { message: 'تم إرسال النموذج بنجاح!', errors: null };
}

function MyForm() {
  const [state, action] = useFormState(validateForm, { message: null, errors: null });

  return (
    

      الاسم:
      

      {state?.errors?.name && 
{state.errors.name}
}

      البريد الإلكتروني:
      

      {state?.errors?.email && 
{state.errors.email}
}

      إرسال
      {state?.message && 
{state.message}
}
    
  );
}

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

2. التحديثات المتفائلة (Optimistic Updates):

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

'use client'

import { useFormState } from 'react-dom';
import { useState } from 'react';

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // محاكاة تأخير الشبكة

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'فشل الإرسال!' };
  }
  return { message: 'تم الإرسال بنجاح!' };
}

function OptimisticForm() {
  const [optimisticValue, setOptimisticValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [state, action] = useFormState(submitForm, { message: '' });

  const handleSubmit = async (e) => {
    setIsSubmitting(true);
    setOptimisticValue(e.target.value.value);
    const formData = new FormData(e.target);
    const result = await action(prevState, formData);
    setIsSubmitting(false);

    if (result?.message === 'فشل الإرسال!') {
      setOptimisticValue(''); // التراجع عند حدوث خطأ
    }
  };

  return (
    

      القيمة:
      


      إرسال
      {state?.message && 
{state.message}
}
    
  );
}

في هذا المثال، نحن نحاكي استجابة خادم متأخرة. قبل اكتمال إجراء الخادم، يتم تحديث حقل الإدخال بشكل متفائل بالقيمة المرسلة. إذا فشل إجراء الخادم (تمت محاكاته عن طريق إرسال القيمة 'error')، يتم إرجاع حقل الإدخال إلى حالته السابقة.

3. التعامل مع رفع الملفات:

يمكن أيضًا استخدام useFormState للتعامل مع رفع الملفات. يتعامل كائن FormData تلقائيًا مع بيانات الملف. إليك مثال:

async function uploadFile(prevState, formData) {
  const file = formData.get('file');

  if (!file) {
    return { message: 'يرجى تحديد ملف.' };
  }

  // محاكاة رفع الملف
  await new Promise(resolve => setTimeout(resolve, 1000));

  // عادةً ما تقوم برفع الملف إلى خادم هنا
  console.log('File uploaded:', file.name);

  return { message: `تم رفع الملف ${file.name} بنجاح!` };
}

function FileUploadForm() {
  const [state, action] = useFormState(uploadFile, { message: null });

  return (
    

      حدد ملفًا:
      



      رفع

      {state?.message && 
{state.message}
}
    
  );
}

في هذا المثال، يسترد إجراء الخادم uploadFile الملف من كائن FormData ويعالجه. في تطبيق حقيقي، ستقوم عادةً برفع الملف إلى خدمة تخزين سحابية مثل Amazon S3 أو Google Cloud Storage.

4. التحسين التدريجي:

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

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

5. اعتبارات إمكانية الوصول:

عند بناء النماذج، من المهم مراعاة إمكانية الوصول لضمان أن يتمكن المستخدمون ذوو الإعاقة من استخدام نماذجك بفعالية. يمكن أن يساعدك useFormState في إنشاء نماذج يمكن الوصول إليها من خلال توفير آليات للتعامل مع الأخطاء وتقديم ملاحظات للمستخدمين. إليك بعض أفضل الممارسات لإمكانية الوصول:

• استخدام HTML الدلالي: استخدم عناصر HTML الدلالية مثل <label> و <input> و <button> لتوفير بنية ومعنى لنماذجك.
• توفير تسميات واضحة: تأكد من أن جميع حقول النموذج لها تسميات واضحة ووصفية مرتبطة بعناصر الإدخال المقابلة باستخدام السمة for.
• التعامل مع الأخطاء بلطف: اعرض أخطاء التحقق بطريقة واضحة وموجزة، واستخدم سمات ARIA لتنبيه المستخدمين الذين يستخدمون قارئات الشاشة إلى وجود أخطاء.
• توفير التنقل عبر لوحة المفاتيح: تأكد من أن المستخدمين يمكنهم التنقل عبر النموذج باستخدام لوحة المفاتيح.
• استخدام سمات ARIA: استخدم سمات ARIA لتوفير معلومات إضافية للتقنيات المساعدة، مثل قارئات الشاشة.

أفضل الممارسات لاستخدام useFormState

للاستفادة القصوى من خطاف useFormState، ضع في اعتبارك أفضل الممارسات التالية:

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

أمثلة وحالات استخدام واقعية

يمكن استخدام useFormState في مجموعة واسعة من التطبيقات الواقعية. إليك بعض الأمثلة:

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

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

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

الخاتمة

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