রিঅ্যাক্টের `experimental_useFormStatus` দিয়ে ফর্ম ভ্যালিডেশনে দক্ষতা অর্জন

ফর্মগুলি ওয়েব ইন্টারঅ্যাকশনের ভিত্তি। একটি সাধারণ নিউজলেটার সাইনআপ থেকে শুরু করে একটি জটিল মাল্টি-স্টেপ আর্থিক অ্যাপ্লিকেশন পর্যন্ত, এগুলিই প্রধান মাধ্যম যার মাধ্যমে ব্যবহারকারীরা আমাদের অ্যাপ্লিকেশনগুলির সাথে যোগাযোগ করে। তবুও, বহু বছর ধরে, রিঅ্যাক্টে ফর্ম স্টেট পরিচালনা করা জটিলতা, বয়লারপ্লেট এবং নির্ভরতা ক্লান্তির উৎস হয়ে দাঁড়িয়েছে। আমরা নিয়ন্ত্রিত উপাদানগুলির সাথে লড়াই করেছি, স্টেট ম্যানেজমেন্ট লাইব্রেরিগুলির সাথে যুদ্ধ করেছি এবং একটি মসৃণ এবং স্বজ্ঞাত ব্যবহারকারীর অভিজ্ঞতা অর্জনের জন্য অসংখ্য `onChange` হ্যান্ডলার লিখেছি।

রিঅ্যাক্ট টিম ওয়েব ডেভেলপমেন্টের এই মৌলিক দিকটি পুনর্বিবেচনা করছে, যার ফলে রিঅ্যাক্ট সার্ভার অ্যাকশন-এর উপর ভিত্তি করে একটি নতুন, শক্তিশালী দৃষ্টান্তের প্রবর্তন হয়েছে। প্রগ্রেসিভ এনহ্যান্সমেন্টের নীতিগুলির উপর নির্মিত এই নতুন মডেলটির লক্ষ্য হল লজিককে তার উপযুক্ত স্থানে—প্রায়শই সার্ভারে—সরিয়ে ফর্ম পরিচালনাকে সহজ করা। এই ক্লায়েন্ট-সাইড বিপ্লবের কেন্দ্রবিন্দুতে রয়েছে দুটি নতুন পরীক্ষামূলক হুক: `useFormState` এবং আজকের আলোচনার মূল বিষয়, `experimental_useFormStatus`।

এই বিস্তৃত গাইডটি আপনাকে `experimental_useFormStatus` হুকের গভীরে নিয়ে যাবে। আমরা কেবল এর সিনট্যাক্স দেখব না; এটি যে মানসিক মডেলটিকে সক্ষম করে তা অন্বেষণ করব: স্ট্যাটাস-ভিত্তিক বৈধতা লজিক। আপনি শিখবেন কীভাবে এই হুকটি UI-কে ফর্ম স্টেট থেকে আলাদা করে, অপেক্ষমান স্টেটগুলির পরিচালনাকে সহজ করে এবং সার্ভার অ্যাকশনগুলির সাথে একত্রে কাজ করে শক্তিশালী, অ্যাক্সেসযোগ্য এবং অত্যন্ত কার্যকরী ফর্ম তৈরি করে যা জাভাস্ক্রিপ্ট লোড হওয়ার আগেই কাজ করে। রিঅ্যাক্টে ফর্ম তৈরি সম্পর্কে আপনি যা জানেন তা পুনর্বিবেচনা করার জন্য প্রস্তুত হন।

একটি দৃষ্টান্ত পরিবর্তন: রিঅ্যাক্ট ফর্মগুলির বিবর্তন

`useFormStatus` যে উদ্ভাবন নিয়ে আসে তা সম্পূর্ণরূপে উপলব্ধি করতে, রিঅ্যাক্ট ইকোসিস্টেমে ফর্ম ব্যবস্থাপনার যাত্রা প্রথমে আমাদের বুঝতে হবে। এই প্রসঙ্গটি সেই সমস্যাগুলিকে তুলে ধরে যা এই নতুন পদ্ধতিটি সুন্দরভাবে সমাধান করে।

পুরানো পদ্ধতি: নিয়ন্ত্রিত উপাদান এবং তৃতীয় পক্ষের লাইব্রেরি

বহু বছর ধরে, রিঅ্যাক্টে ফর্মগুলির স্ট্যান্ডার্ড পদ্ধতি ছিল নিয়ন্ত্রিত উপাদান প্যাটার্ন। এর মধ্যে রয়েছে:

• প্রতিটি ফর্ম ইনপুটের মান ধরে রাখার জন্য একটি রিঅ্যাক্ট স্টেট ভেরিয়েবল (যেমন, `useState` থেকে) ব্যবহার করা।
• প্রতিটি কীস্ট্রোকের উপর স্টেট আপডেট করার জন্য একটি `onChange` হ্যান্ডলার লেখা।
• ইনপুটের `value` প্রপে স্টেট ভেরিয়েবলটি ফেরত পাঠানো।

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

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

নতুন যুগ: প্রগ্রেসিভ এনহ্যান্সমেন্ট এবং সার্ভার অ্যাকশন

রিঅ্যাক্ট সার্ভার অ্যাকশন একটি দৃষ্টান্ত পরিবর্তন প্রবর্তন করে। মূল ধারণাটি হল ওয়েব প্ল্যাটফর্মের ভিত্তির উপর তৈরি করা: স্ট্যান্ডার্ড HTML `

` উপাদান। একটি সার্ভার অ্যাকশন সহ একটি ফর্ম একটি ক্লাসিক HTML ফর্ম জমা দেওয়ার মতো কাজ করে—জাভাস্ক্রিপ্ট ব্যর্থ হলেও বা নিষ্ক্রিয় করা হলেও এটি পুরোপুরি কাজ করতে পারে। এটি প্রগ্রেসিভ এনহ্যান্সমেন্ট-এর সারমর্ম।

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

এই মডেলটি ব্যবসায়িক লজিক এবং বৈধতার জন্য সত্যের উৎসকে সার্ভারে (বা একটি সার্ভার-সদৃশ পরিবেশে) ফিরিয়ে নিয়ে যায়। ক্লায়েন্ট-সাইড কোডটি সহজ হয়ে যায়, প্রাথমিকভাবে সেই সার্ভার যোগাযোগের *স্ট্যাটাস*-এর উপর ভিত্তি করে UI রেন্ডার করার সাথে সম্পর্কিত। এখানেই `useFormStatus` কার্যকর হয়।

হুডের নিচে: `experimental_useFormStatus` কী?

`experimental_useFormStatus` হুক হল একটি ক্লায়েন্ট-সাইড টুল যা একটি প্যারেন্ট `` উপাদানের শেষ জমা দেওয়ার তথ্য সরবরাহ করার জন্য ডিজাইন করা হয়েছে। এটি একটি রিড-অনলি হুক যা একটি উপাদানকে ফর্মের জমা দেওয়ার স্ট্যাটাস সম্পর্কে প্রয়োজনীয় সবকিছু বলে দেয় কোনো প্রপস পাস করার প্রয়োজন ছাড়াই।

মূল কার্যকারিতা

একটি বড় ফর্মের ভিতরে একটি সাবমিট বোতামের কল্পনা করুন। এই বোতামটি কীভাবে জানবে যে ফর্মটি জমা দেওয়া হচ্ছে? ঐতিহ্যগতভাবে, আপনাকে `isSubmitting`-এর মতো একটি স্টেট ভেরিয়েবল একাধিক স্তরের উপাদানের মাধ্যমে পাস করতে হবে (প্রপ ড্রিলিং)। `useFormStatus` দিয়ে, বোতাম উপাদানটি নিজেই এই তথ্য খুঁজে বের করতে পারে।

হুকটি অবশ্যই এমন একটি উপাদান থেকে কল করতে হবে যা একটি `` উপাদানের ভিতরে রেন্ডার করা হয়েছে। তারপরে এটি সেই নির্দিষ্ট ফর্মের জীবনচক্র সম্পর্কে স্ট্যাটাস তথ্য সরবরাহ করে।

`useFormStatus` হুকের গঠন

আপনি যখন `const status = useFormStatus()` কল করেন, তখন আপনি নিম্নলিখিত মূল বৈশিষ্ট্যগুলির সাথে একটি অবজেক্ট ফিরে পান:

• `pending` (বুলিয়ান): এটি সবচেয়ে বেশি ব্যবহৃত বৈশিষ্ট্য। প্যারেন্ট ফর্মটি বর্তমানে জমা দেওয়া হলে এটি `true` এবং অন্যথায় `false`। এটি বোতামগুলি নিষ্ক্রিয় করতে, লোডিং স্পিনার দেখাতে বা অপেক্ষমান স্টেটগুলিকে স্টাইল করার জন্য উপযুক্ত।
• `data` (FormData): `FormData` ইন্টারফেস প্রয়োগ করে এমন একটি অবজেক্ট। এতে ফর্মের সাথে জমা দেওয়া ডেটা থাকে। এটি আশাবাদী UI আপডেটগুলি বাস্তবায়নের জন্য অবিশ্বাস্যভাবে উপযোগী—উদাহরণস্বরূপ, সার্ভার তার তৈরি নিশ্চিত করার আগে ব্যবহারকারীর মন্তব্য জমা দেওয়ার সাথে সাথেই একটি তালিকায় দেখানো।
• `method` (স্ট্রিং): ফর্ম জমা দেওয়ার জন্য ব্যবহৃত HTTP পদ্ধতি ('get' বা 'post')।
• `action` (ফাংশন): জমা দেওয়ার সময় আহ্বান করা সার্ভার অ্যাকশন ফাংশনের একটি রেফারেন্স।

সোনালী নিয়ম: ``-এর একটি শিশু

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

একটি সাধারণ উদাহরণ: স্মার্ট সাবমিট বোতাম

আসুন অ্যাকশনে সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রটি দেখি। একটি স্ট্যান্ডার্ড ``-এর পরিবর্তে, আমরা এমন একটি উপাদান তৈরি করব যা ফর্মের জমা দেওয়ার স্টেট সম্পর্কে সচেতন।

ফাইল: SubmitButton.js

import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton() { const { pending } = useFormStatus(); return (

{pending ? 'জমা দেওয়া হচ্ছে...' : 'সাইন আপ করুন'} ); }

ফাইল: SignUpForm.js

import { SubmitButton } from './SubmitButton'; import { signUpAction } from './actions'; // একটি সার্ভার অ্যাকশন export function SignUpForm() { return ( ইমেল:
); }

এই উদাহরণে, `SubmitButton` সম্পূর্ণরূপে স্বয়ংসম্পূর্ণ। এটি কোনও প্রপস গ্রহণ করে না। এটি `useFormStatus` ব্যবহার করে জানতে পারে কখন `SignUpForm` অপেক্ষমান এবং স্বয়ংক্রিয়ভাবে নিজেকে অক্ষম করে এবং এর পাঠ্য পরিবর্তন করে। এটি ডিকপলিং এবং পুনরায় ব্যবহারযোগ্য, ফর্ম-সচেতন উপাদান তৈরি করার জন্য একটি শক্তিশালী প্যাটার্ন।

বিষয়টির কেন্দ্রবিন্দু: স্ট্যাটাস-ভিত্তিক বৈধতা লজিক

এখন আমরা মূল ধারণায় আসি। `useFormStatus` শুধুমাত্র লোডিং স্টেটগুলির জন্য নয়; এটি বৈধতা সম্পর্কে ভিন্নভাবে চিন্তা করার একটি মূল সক্ষমকারী।

"স্ট্যাটাস বৈধতা" সংজ্ঞায়িত করা

স্ট্যাটাস-ভিত্তিক বৈধতা হল একটি প্যাটার্ন যেখানে বৈধতা প্রতিক্রিয়া প্রাথমিকভাবে একটি ফর্ম জমা দেওয়ার প্রচেষ্টার প্রতিক্রিয়ায় ব্যবহারকারীর কাছে সরবরাহ করা হয়। প্রতিটি কীস্ট্রোক (`onChange`) বা ব্যবহারকারী যখন একটি ক্ষেত্র ত্যাগ করে (`onBlur`) তখন বৈধতা দেওয়ার পরিবর্তে, প্রাথমিক বৈধতা লজিকটি চলে যখন ব্যবহারকারী ফর্ম জমা দেয়। এই জমা দেওয়ার ফলাফল—এর *স্ট্যাটাস* (যেমন, সাফল্য, বৈধতা ত্রুটি, সার্ভার ত্রুটি)—তখন UI আপডেট করতে ব্যবহৃত হয়।

এই পদ্ধতিটি রিঅ্যাক্ট সার্ভার অ্যাকশনগুলির সাথে পুরোপুরি সামঞ্জস্যপূর্ণ। সার্ভার অ্যাকশন বৈধতার জন্য সত্যের একক উৎস হয়ে ওঠে। এটি ফর্ম ডেটা গ্রহণ করে, আপনার ব্যবসায়ের নিয়মগুলির বিরুদ্ধে এটি বৈধ করে (যেমন, "এই ইমেলটি ইতিমধ্যে ব্যবহার করা হয়েছে?") এবং ফলাফলের ইঙ্গিত করে একটি স্ট্রাকচার্ড স্টেট অবজেক্ট ফেরত দেয়।

এর অংশীদারের ভূমিকা: `experimental_useFormState`

`useFormStatus` আমাদের বলে *কী* ঘটছে (অপেক্ষমান), তবে এটি আমাদের বলে না যে *কী* ঘটেছে তার ফলাফল। এর জন্য, আমাদের এর সহোদর হুক প্রয়োজন: `experimental_useFormState`।

`useFormState` হল একটি হুক যা একটি ফর্ম অ্যাকশনের ফলাফলের উপর ভিত্তি করে স্টেট আপডেট করার জন্য ডিজাইন করা হয়েছে। এটি অ্যাকশন ফাংশন এবং একটি প্রাথমিক স্টেটকে আর্গুমেন্ট হিসাবে নেয় এবং আপনার ফর্মে পাস করার জন্য একটি নতুন স্টেট এবং একটি মোড়ানো অ্যাকশন ফাংশন ফেরত দেয়।

const [state, formAction] = useFormState(myAction, initialState);

• `state`: এতে `myAction`-এর শেষ সম্পাদনের রিটার্ন ভ্যালু থাকবে। এখানেই আমরা আমাদের ত্রুটি বার্তা পাব।
• `formAction`: এটি আপনার অ্যাকশনের একটি নতুন সংস্করণ যা আপনার `
  `-এর `action` প্রপে পাস করা উচিত। যখন এটি কল করা হয়, তখন এটি মূল অ্যাকশনটিকে ট্রিগার করবে এবং `state` আপডেট করবে।

সংযুক্ত কর্মপ্রবাহ: ক্লিক থেকে প্রতিক্রিয়া

`useFormState` এবং `useFormStatus` কীভাবে একসাথে একটি সম্পূর্ণ বৈধতা লুপ তৈরি করে তা এখানে দেওয়া হল:

1. প্রাথমিক রেন্ডার: ফর্মটি `useFormState` দ্বারা প্রদত্ত একটি প্রাথমিক স্টেট দিয়ে রেন্ডার হয়। কোনও ত্রুটি দেখানো হয় না।
2. ব্যবহারকারী জমা দেওয়া: ব্যবহারকারী সাবমিট বোতামে ক্লিক করেন।
3. অপেক্ষমান স্টেট: সাবমিট বোতামে `useFormStatus` হুকটি অবিলম্বে `pending: true` রিপোর্ট করে। বোতামটি অক্ষম হয়ে যায় এবং একটি লোডিং বার্তা দেখায়।
4. অ্যাকশন সম্পাদন: সার্ভার অ্যাকশন (যা `useFormState` দ্বারা মোড়ানো) ফর্ম ডেটা সহ কার্যকর করা হয়। এটি বৈধতা সম্পাদন করে।
5. অ্যাকশন ফেরত আসে: অ্যাকশনটি বৈধতা দিতে ব্যর্থ হয় এবং একটি স্টেট অবজেক্ট ফেরত দেয়, উদাহরণস্বরূপ:
   `{ message: "বৈধতা ব্যর্থ হয়েছে", errors: { email: "এই ইমেলটি ইতিমধ্যে নেওয়া হয়েছে।" } }`
6. স্টেট আপডেট: `useFormState` এই রিটার্ন ভ্যালু গ্রহণ করে এবং এর `state` ভেরিয়েবল আপডেট করে। এটি ফর্ম উপাদানটির একটি পুনরায় রেন্ডার ট্রিগার করে।
7. UI প্রতিক্রিয়া: ফর্মটি পুনরায় রেন্ডার হয়। `useFormStatus` থেকে `pending` স্ট্যাটাস `false` হয়ে যায়। উপাদানটি এখন `state.errors.email` পড়তে এবং ইমেল ইনপুট ফিল্ডের পাশে ত্রুটি বার্তা প্রদর্শন করতে পারে।

এই পুরো প্রবাহটি ব্যবহারকারীকে স্পষ্ট, সার্ভার-কর্তৃত্বপূর্ণ প্রতিক্রিয়া সরবরাহ করে, যা সম্পূর্ণরূপে জমা দেওয়ার স্ট্যাটাস এবং ফলাফলের উপর ভিত্তি করে চালিত হয়।

ব্যবহারিক মাস্টারক্লাস: একটি মাল্টি-ফিল্ড রেজিস্ট্রেশন ফর্ম তৈরি করা

আসুন একটি সম্পূর্ণ, প্রোডাকশন-স্টাইল রেজিস্ট্রেশন ফর্ম তৈরি করে এই ধারণাগুলিকে দৃঢ় করি। আমরা বৈধতার জন্য একটি সার্ভার অ্যাকশন এবং একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে `useFormState` এবং `useFormStatus` উভয়ই ব্যবহার করব।

ধাপ 1: বৈধতা সহ সার্ভার অ্যাকশন সংজ্ঞায়িত করা

প্রথমে, আমাদের সার্ভার অ্যাকশন প্রয়োজন। শক্তিশালী বৈধতার জন্য, আমরা জনপ্রিয় লাইব্রেরি Zod ব্যবহার করব। এই অ্যাকশনটি একটি পৃথক ফাইলে থাকবে, যদি আপনি Next.js-এর মতো একটি ফ্রেমওয়ার্ক ব্যবহার করেন তবে `'use server';` নির্দেশিকা দিয়ে চিহ্নিত করা হবে।

ফাইল: actions/authActions.js

'use server'; import { z } from 'zod'; // বৈধতা স্কিমা সংজ্ঞায়িত করুন const registerSchema = z.object({ username: z.string().min(3, 'ব্যবহারকারীর নাম কমপক্ষে 3 অক্ষরের হতে হবে।'), email: z.string().email('অনুগ্রহ করে একটি বৈধ ইমেল ঠিকানা লিখুন।'), password: z.string().min(8, 'পাসওয়ার্ড কমপক্ষে 8 অক্ষরের হতে হবে।'), }); // আমাদের ফর্মের জন্য প্রাথমিক স্টেট সংজ্ঞায়িত করুন export const initialState = { message: '', errors: {}, }; export async function registerUser(prevState, formData) { // 1. ফর্ম ডেটা বৈধ করুন const validatedFields = registerSchema.safeParse( Object.fromEntries(formData.entries()) ); // 2. যদি বৈধতা ব্যর্থ হয়, তাহলে ত্রুটিগুলি ফেরত দিন if (!validatedFields.success) { return { message: 'বৈধতা ব্যর্থ হয়েছে। অনুগ্রহ করে ক্ষেত্রগুলি পরীক্ষা করুন।', errors: validatedFields.error.flatten().fieldErrors, }; } // 3. (অনুসরণ করুন) ডাটাবেসে ব্যবহারকারী ইতিমধ্যে বিদ্যমান কিনা তা পরীক্ষা করুন // একটি বাস্তব অ্যাপে, আপনি এখানে আপনার ডাটাবেস জিজ্ঞাসা করবেন। if (validatedFields.data.email === 'user@example.com') { return { message: 'নিবন্ধন ব্যর্থ হয়েছে।', errors: { email: ['এই ইমেলটি ইতিমধ্যে নিবন্ধিত।'] }, }; } // 4. (অনুসরণ করুন) ব্যবহারকারী তৈরি করুন console.log('ব্যবহারকারী তৈরি করা হচ্ছে:', validatedFields.data); // 5. একটি সাফল্যের স্টেট ফেরত দিন // একটি বাস্তব অ্যাপে, আপনি এখানে 'next/navigation' থেকে `redirect()` ব্যবহার করে পুনঃনির্দেশ করতে পারেন return { message: 'ব্যবহারকারী সফলভাবে নিবন্ধিত হয়েছে!', errors: {}, }; }

এই সার্ভার অ্যাকশনটি আমাদের ফর্মের মস্তিষ্ক। এটি স্বয়ংসম্পূর্ণ, সুরক্ষিত এবং সাফল্য এবং ত্রুটি উভয় স্টেটের জন্য একটি স্পষ্ট ডেটা স্ট্রাকচার সরবরাহ করে।

ধাপ 2: পুনরায় ব্যবহারযোগ্য, স্ট্যাটাস-সচেতন উপাদান তৈরি করা

আমাদের প্রধান ফর্ম উপাদানটিকে পরিষ্কার রাখতে, আমরা আমাদের ইনপুট এবং সাবমিট বোতামের জন্য ডেডিকেটেড উপাদান তৈরি করব।

ফাইল: components/SubmitButton.js

'use client'; import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton({ label }) { const { pending } = useFormStatus(); return ( {pending ? 'প্রক্রিয়াকরণ...' : label} ); }

`aria-disabled={pending}`-এর ব্যবহার লক্ষ্য করুন। এটি একটি গুরুত্বপূর্ণ অ্যাক্সেসিবিলিটি অনুশীলন, যা নিশ্চিত করে যে স্ক্রিন রিডাররা সঠিকভাবে অক্ষম স্টেট ঘোষণা করে।

ধাপ 3: `useFormState` দিয়ে প্রধান ফর্ম একত্রিত করা

এখন, আসুন আমাদের প্রধান ফর্ম উপাদানে সবকিছু একসাথে আনি। আমরা আমাদের UI-কে `registerUser` অ্যাকশনের সাথে সংযোগ করতে `useFormState` ব্যবহার করব।

ফাইল: components/RegistrationForm.js

'use client'; import { experimental_useFormState as useFormState } from 'react-dom'; import { registerUser, initialState } from '../actions/authActions'; import { SubmitButton } from './SubmitButton'; export function RegistrationForm() { const [state, formAction] = useFormState(registerUser, initialState); return (

নিবন্ধন

{state?.message && !state.errors &&

{state.message}

} {state?.message && state.errors &&

{state.message}

}

ব্যবহারকারীর নাম {state?.errors?.username && (

{state.errors.username[0]}

)}

ইমেল {state?.errors?.email && (

{state.errors.email[0]}

)}

পাসওয়ার্ড {state?.errors?.password && (

{state.errors.password[0]}

)}

); }

এই উপাদানটি এখন ঘোষণামূলক এবং পরিষ্কার। এটি `useFormState` দ্বারা প্রদত্ত `state` অবজেক্ট ছাড়া অন্য কোনও স্টেট পরিচালনা করে না। এর একমাত্র কাজ হল সেই স্টেটের উপর ভিত্তি করে UI রেন্ডার করা। বোতামটি অক্ষম করার লজিকটি `SubmitButton`-এ এনক্যাপসুলেট করা হয়েছে এবং সমস্ত বৈধতা লজিক `authActions.js`-এ থাকে। উদ্বেগের এই পৃথকীকরণ রক্ষণাবেক্ষণের জন্য একটি বিশাল জয়।

উন্নত কৌশল এবং পেশাদার সেরা অনুশীলন

যদিও বেসিক প্যাটার্নটি শক্তিশালী, বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলির জন্য প্রায়শই আরও সূক্ষ্মতার প্রয়োজন হয়। আসুন কিছু উন্নত কৌশল অন্বেষণ করি।

হাইব্রিড পদ্ধতি: তাত্ক্ষণিক এবং জমা দেওয়ার পরে বৈধতা একত্রিত করা

স্ট্যাটাস-ভিত্তিক বৈধতা সার্ভার-সাইড চেকের জন্য চমৎকার, তবে ব্যবহারকারীকে তাদের ইমেল অবৈধ বলার জন্য নেটওয়ার্ক রাউন্ডট্রিপের জন্য অপেক্ষা করা ধীর হতে পারে। একটি হাইব্রিড পদ্ধতি প্রায়শই সেরা:

• HTML5 বৈধতা ব্যবহার করুন: বেসিকগুলি ভুলবেন না! `required`, `type="email"`, `minLength` এবং `pattern`-এর মতো বৈশিষ্ট্যগুলি কোনও খরচ ছাড়াই তাত্ক্ষণিক, ব্রাউজার-নেটিভ প্রতিক্রিয়া সরবরাহ করে।
• হালকা ক্লায়েন্ট-সাইড বৈধতা: সম্পূর্ণরূপে কসমেটিক বা বিন্যাস চেকের জন্য (যেমন, পাসওয়ার্ড শক্তি নির্দেশক), আপনি এখনও `useState` এবং `onChange` হ্যান্ডলারগুলির একটি সর্বনিম্ন পরিমাণ ব্যবহার করতে পারেন।
• সার্ভার-সাইড কর্তৃপক্ষ: সর্বাধিক গুরুত্বপূর্ণ, ব্যবসায়িক-লজিক বৈধতার জন্য সার্ভার অ্যাকশন সংরক্ষণ করুন যা ক্লায়েন্টে করা যায় না (যেমন, অনন্য ব্যবহারকারীর নামের জন্য পরীক্ষা করা, ডাটাবেস রেকর্ডের বিরুদ্ধে বৈধতা দেওয়া)।

এটি আপনাকে উভয় জগতের সেরা সুবিধা দেয়: সাধারণ ত্রুটির জন্য তাত্ক্ষণিক প্রতিক্রিয়া এবং জটিল নিয়মগুলির জন্য কর্তৃত্বপূর্ণ বৈধতা।

অ্যাক্সেসিবিলিটি (A11y): সবার জন্য ফর্ম তৈরি করা

অ্যাক্সেসিবিলিটি আলোচনার যোগ্য নয়। স্ট্যাটাস-ভিত্তিক বৈধতা বাস্তবায়ন করার সময়, এই বিষয়গুলি মাথায় রাখুন:

• ত্রুটি ঘোষণা করুন: আমাদের উদাহরণে, আমরা ত্রুটি বার্তা কন্টেনারগুলিতে `aria-live="polite"` ব্যবহার করেছি। এটি স্ক্রিন রিডারদের ত্রুটি বার্তাটি প্রদর্শিত হওয়ার সাথে সাথেই ঘোষণা করতে বলে, ব্যবহারকারীর বর্তমান প্রবাহে বাধা না দিয়ে।
• ইনপুটগুলির সাথে ত্রুটিগুলি যুক্ত করুন: আরও শক্তিশালী সংযোগের জন্য, `aria-describedby` বৈশিষ্ট্যটি ব্যবহার করুন। ইনপুটটি তার ত্রুটি বার্তা কন্টেনারের আইডির দিকে নির্দেশ করতে পারে, একটি প্রোগ্রাম্যাটিক লিঙ্ক তৈরি করে।
• ফোকাস ম্যানেজমেন্ট: ত্রুটি সহ জমা দেওয়ার পরে, প্রথম অবৈধ ক্ষেত্রটিতে প্রোগ্রাম্যাটিকভাবে ফোকাস সরানোর কথা বিবেচনা করুন। এটি ব্যবহারকারীদের কী ভুল হয়েছে তা অনুসন্ধান করা থেকে বাঁচায়।

`useFormStatus`-এর `data` বৈশিষ্ট্য সহ আশাবাদী UI

একটি সোশ্যাল মিডিয়া অ্যাপের কল্পনা করুন যেখানে একজন ব্যবহারকারী একটি মন্তব্য পোস্ট করেন। এক সেকেন্ডের জন্য একটি স্পিনার দেখানোর পরিবর্তে, আপনি অ্যাপটিকে তাত্ক্ষণিক অনুভব করাতে পারেন। `useFormStatus` থেকে `data` সম্পত্তি এর জন্য উপযুক্ত।

ফর্ম জমা দেওয়ার সময়, `pending` সত্য হয়ে যায় এবং `data` জমা দেওয়ার `FormData` দিয়ে জনবহুল হয়। আপনি অবিলম্বে এই `data` ব্যবহার করে একটি অস্থায়ী, 'অপেক্ষমান' ভিজ্যুয়াল স্টেটে নতুন মন্তব্য রেন্ডার করতে পারেন। যদি সার্ভার অ্যাকশন সফল হয়, আপনি সার্ভার থেকে চূড়ান্ত ডেটা দিয়ে অপেক্ষমান মন্তব্যটি প্রতিস্থাপন করেন। যদি এটি ব্যর্থ হয়, আপনি অপেক্ষমান মন্তব্যটি সরিয়ে একটি ত্রুটি দেখাতে পারেন। এটি অ্যাপ্লিকেশনটিকে অবিশ্বাস্যভাবে প্রতিক্রিয়াশীল করে তোলে।

"পরীক্ষামূলক" জলের নেভিগেট করা

`experimental_useFormStatus` এবং `experimental_useFormState`-এর "পরীক্ষামূলক" উপসর্গটির সমাধান করা গুরুত্বপূর্ণ।

"পরীক্ষামূলক" এর আসল অর্থ কী

যখন রিঅ্যাক্ট একটি API-কে পরীক্ষামূলক হিসাবে লেবেল করে, তখন এর অর্থ হল:

• API পরিবর্তন হতে পারে: ব্রেকিং পরিবর্তনের জন্য স্ট্যান্ডার্ড সিম্যান্টিক ভার্সনিং (SemVer) অনুসরণ না করে ভবিষ্যতের রিঅ্যাক্ট রিলিজে নাম, আর্গুমেন্ট বা রিটার্ন ভ্যালু পরিবর্তন করা যেতে পারে।
• বাগ থাকতে পারে: একটি নতুন বৈশিষ্ট্য হিসাবে, এটির প্রান্তের কেস থাকতে পারে যা এখনও সম্পূর্ণরূপে বোঝা বা সমাধান করা হয়নি।
• নথিপত্র কম থাকতে পারে: যদিও মূল ধারণাগুলি নথিভুক্ত করা হয়েছে, উন্নত প্যাটার্নের উপর বিস্তারিত গাইড এখনও বিকশিত হতে পারে।

কখন গ্রহণ করবেন এবং কখন অপেক্ষা করবেন

তাহলে, আপনার প্রকল্পে এটি ব্যবহার করা উচিত? উত্তরটি আপনার পরিস্থিতির উপর নির্ভর করে:

• এর জন্য ভাল: ব্যক্তিগত প্রকল্প, অভ্যন্তরীণ সরঞ্জাম, স্টার্টআপ বা সম্ভাব্য API পরিবর্তনগুলি পরিচালনা করতে স্বচ্ছন্দ দল। Next.js-এর মতো একটি ফ্রেমওয়ার্কের মধ্যে এটি ব্যবহার করা (যা এই বৈশিষ্ট্যগুলিকে এর অ্যাপ রাউটারে একত্রিত করেছে) সাধারণত একটি নিরাপদ বাজি, কারণ ফ্রেমওয়ার্ক কিছু পরিবর্তনকে অ্যাবস্ট্রাক্ট করতে সাহায্য করতে পারে।
• এর জন্য সতর্কতা অবলম্বন করুন: বৃহৎ আকারের এন্টারপ্রাইজ অ্যাপ্লিকেশন, মিশন-সমালোচনামূলক সিস্টেম বা দীর্ঘমেয়াদী রক্ষণাবেক্ষণ চুক্তিযুক্ত প্রকল্প যেখানে API স্থিতিশীলতা অত্যাবশ্যক। এই ক্ষেত্রে, হুকগুলি স্থিতিশীল API-তে উন্নীত না হওয়া পর্যন্ত অপেক্ষা করা বুদ্ধিমানের কাজ হতে পারে।

এই হুকগুলির স্থিতিশীলতা সম্পর্কিত ঘোষণার জন্য সর্বদা অফিসিয়াল রিঅ্যাক্ট ব্লগ এবং ডকুমেন্টেশনের দিকে নজর রাখুন।

উপসংহার: রিঅ্যাক্টে ফর্মের ভবিষ্যৎ

`experimental_useFormStatus` এবং এর সম্পর্কিত API-এর প্রবর্তন কেবল একটি নতুন সরঞ্জাম নয়; এটি রিঅ্যাক্টের সাথে ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করার পদ্ধতিতে একটি দার্শনিক পরিবর্তন উপস্থাপন করে। ওয়েব প্ল্যাটফর্মের ভিত্তিগুলিকে গ্রহণ করে এবং সার্ভারে স্টেটফুল লজিককে কো-লোকেট করে, আমরা এমন অ্যাপ্লিকেশন তৈরি করতে পারি যা সহজ, আরও স্থিতিস্থাপক এবং প্রায়শই আরও কার্যকরী।

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

যদিও "পরীক্ষামূলক" ট্যাগটি কিছুটা সতর্কতা অবলম্বন করে, তবে দিকটি পরিষ্কার। রিঅ্যাক্টে ফর্মের ভবিষ্যৎ হল প্রগ্রেসিভ এনহ্যান্সমেন্ট, সরলীকৃত স্টেট ম্যানেজমেন্ট এবং ক্লায়েন্ট এবং সার্ভার লজিকের মধ্যে একটি শক্তিশালী, নির্বিঘ্ন সংহতকরণ। আজ এই নতুন হুকগুলিতে দক্ষতা অর্জন করে, আপনি কেবল একটি নতুন API শিখছেন না; আপনি রিঅ্যাক্টের সাথে ওয়েব অ্যাপ্লিকেশন বিকাশের পরবর্তী প্রজন্মের জন্য প্রস্তুতি নিচ্ছেন।