React useFormStatus Async Validation: অ্যাসিঙ্ক্রোনাস ফর্ম স্ট্যাটাস আপডেট

আধুনিক ওয়েব ডেভেলপমেন্টে, ব্যবহারকারীর সাথে যোগাযোগের জন্য ফর্ম একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান। ডেটার বৈধতা নিশ্চিত করা এবং রিয়েল-টাইম ফিডব্যাক প্রদান করা একটি ইতিবাচক ব্যবহারকারীর অভিজ্ঞতার জন্য অপরিহার্য। React 18-এ প্রবর্তিত React-এর useFormStatus হুক, ফর্ম জমা দেওয়ার স্ট্যাটাস পরিচালনা করার একটি শক্তিশালী এবং সহজ উপায় প্রদান করে, বিশেষ করে যখন অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন নিয়ে কাজ করা হয়। এই নিবন্ধটি useFormStatus-এর জটিলতা নিয়ে আলোচনা করবে, অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন পরিস্থিতির উপর মনোযোগ দেবে, ব্যবহারিক উদাহরণ প্রদান করবে এবং শক্তিশালী ও ব্যবহারকারী-বান্ধব ফর্ম তৈরির জন্য সেরা অনুশীলনগুলি তুলে ধরবে।

useFormStatus-এর মূল বিষয়গুলি বোঝা

useFormStatus হুকটি একটি <form>-এর মধ্যে থাকা বা দ্বারা ট্রিগার হওয়া শেষ ফর্ম সাবমিশন সম্পর্কে তথ্য প্রদান করে। এটি নিম্নলিখিত বৈশিষ্ট্য সহ একটি অবজেক্ট রিটার্ন করে:

• pending: একটি বুলিয়ান যা নির্দেশ করে যে ফর্ম জমা দেওয়া বর্তমানে পেন্ডিং আছে কিনা।
• data: ফর্ম জমা দেওয়ার সাথে যুক্ত ডেটা, যদি উপলব্ধ থাকে।
• method: ফর্ম জমা দেওয়ার জন্য ব্যবহৃত HTTP মেথড (যেমন, 'get' বা 'post')।
• action: ফর্মের অ্যাকশন হিসাবে ব্যবহৃত ফাংশন।

যদিও আপাতদৃষ্টিতে সহজ, useFormStatus অ্যাসিঙ্ক্রোনাস অপারেশনগুলির সাথে কাজ করার সময় অবিশ্বাস্যভাবে মূল্যবান হয়ে ওঠে, যেমন একটি রিমোট সার্ভারের বিরুদ্ধে ব্যবহারকারীর ইনপুট যাচাই করা বা জমা দেওয়ার আগে জটিল ডেটা রূপান্তর করা।

অ্যাসিঙ্ক্রোনাস ভ্যালিডেশনের প্রয়োজনীয়তা

ঐতিহ্যগত সিঙ্ক্রোনাস ভ্যালিডেশন, যেখানে ব্রাউজারের মধ্যেই তাৎক্ষণিকভাবে পরীক্ষা করা হয়, তা বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলির জন্য প্রায়শই অপর্যাপ্ত। এই পরিস্থিতিগুলি বিবেচনা করুন:

• ইউজারনেম প্রাপ্যতা: একটি ইউজারনেম ইতিমধ্যে নেওয়া হয়েছে কিনা তা যাচাই করার জন্য একটি ডাটাবেস লুকআপ প্রয়োজন।
• ইমেল যাচাইকরণ: একটি যাচাইকরণ ইমেল পাঠানো এবং তার বৈধতা নিশ্চিত করার জন্য সার্ভার-সাইড ইন্টারঅ্যাকশন প্রয়োজন।
• পেমেন্ট প্রসেসিং: ক্রেডিট কার্ডের বিবরণ যাচাই করার জন্য একটি পেমেন্ট গেটওয়ের সাথে যোগাযোগ জড়িত।
• ঠিকানা স্বয়ংসম্পূর্ণকরণ: ব্যবহারকারী টাইপ করার সাথে সাথে ঠিকানার বিকল্পগুলির পরামর্শ দেওয়ার জন্য একটি এক্সটার্নাল এপিআই কল করার প্রয়োজন হয়।

এই পরিস্থিতিগুলিতে স্বাভাবিকভাবেই অ্যাসিঙ্ক্রোনাস অপারেশন জড়িত থাকে। useFormStatus, অ্যাসিঙ্ক্রোনাস ফাংশনগুলির সাথে মিলিত হয়ে, আমাদের এই ভ্যালিডেশনগুলি সুন্দরভাবে পরিচালনা করতে দেয়, UI ব্লক না করে ব্যবহারকারীকে তাৎক্ষণিক ফিডব্যাক প্রদান করে।

useFormStatus দিয়ে অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন প্রয়োগ করা

আসুন অ্যাসিঙ্ক্রোনাসভাবে একটি ইউজারনেম প্রাপ্যতা যাচাই করার একটি ব্যবহারিক উদাহরণ অন্বেষণ করি।

উদাহরণ: অ্যাসিঙ্ক্রোনাস ইউজারনেম ভ্যালিডেশন

প্রথমে, আমরা একটি ফর্ম এবং একটি সাবমিট বোতাম সহ একটি সাধারণ React কম্পোনেন্ট তৈরি করব।

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy