2 செப்டம்பர், 2025தமிழ்

ரியாக்ட்டின் experimental_useFormStatus hook-ஐப் பயன்படுத்தி நெறிப்படுத்தப்பட்ட படிவ நிலை மேலாண்மையைக் கண்டறியுங்கள். நிஜ உலக உதாரணங்களுடன் அதன் செயலாக்கம், நன்மைகள் மற்றும் மேம்பட்ட பயன்பாட்டைக் கற்றுக்கொள்ளுங்கள்.

ரியாக்ட் experimental_useFormStatus செயலாக்கம்: மேம்படுத்தப்பட்ட படிவ நிலை மேலாண்மை

ரியாக்ட்டின் வளர்ந்து வரும் சூழல், டெவலப்பர் அனுபவத்தையும் பயன்பாட்டு செயல்திறனையும் மேம்படுத்துவதற்கான கருவிகளையும் நுட்பங்களையும் தொடர்ந்து அறிமுகப்படுத்துகிறது. அத்தகைய ஒரு பரிசோதனை அம்சம் experimental_useFormStatus hook ஆகும், இது படிவ நிலை மேலாண்மையை எளிதாக்க வடிவமைக்கப்பட்டுள்ளது, குறிப்பாக சர்வர் ஆக்சன்கள் மற்றும் படிப்படியான மேம்பாட்டு சூழ்நிலைகளில். இந்த விரிவான வழிகாட்டி experimental_useFormStatus hook-ஐ விரிவாக ஆராய்ந்து, அதன் பயனுள்ள பயன்பாட்டிற்கான நடைமுறை உதாரணங்களையும் நுண்ணறிவுகளையும் வழங்கும்.

`experimental_useFormStatus` என்றால் என்ன?

experimental_useFormStatus hook என்பது ரியாக்ட் குழுவால் அறிமுகப்படுத்தப்பட்ட ஒரு பரிசோதனை API ஆகும், இது ஒரு படிவம் சமர்ப்பிப்பின் நிலையை எளிமையான முறையில் கண்காணிக்க உதவுகிறது, குறிப்பாக சர்வர் ஆக்சன்களைப் பயன்படுத்தும்போது. இந்த hook-க்கு முன்பு, ஒரு படிவத்தின் வெவ்வேறு நிலைகளை (செயலற்ற, சமர்ப்பிக்கப்படுகிறது, வெற்றி, பிழை) நிர்வகிப்பதற்கு பெரும்பாலும் சிக்கலான நிலை மேலாண்மை தர்க்கம் தேவைப்பட்டது. experimental_useFormStatus இந்த சிக்கலின் பெரும்பகுதியை அகற்றி, படிவம் சமர்ப்பிப்பு நிலைகளைக் கண்காணிப்பதற்கும் அதற்கு ಪ್ರತிக்ரியையாற்றுவதற்கும் ஒரு எளிய மற்றும் திறமையான வழியை வழங்குகிறது.

முக்கிய நன்மைகள்:

எளிதாக்கப்பட்ட நிலை மேலாண்மை: படிவம் சமர்ப்பிப்பு நிலைகளை நிர்வகிக்கத் தேவையான boilerplate குறியீட்டைக் குறைக்கிறது.
மேம்படுத்தப்பட்ட பயனர் அனுபவம்: படிவத்தின் நிலையின் அடிப்படையில் மிகவும் பதிலளிக்கக்கூடிய UI புதுப்பிப்புகளை செயல்படுத்துகிறது.
மேம்படுத்தப்பட்ட குறியீடு வாசிப்புத்திறன்: படிவம் தொடர்பான குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்குகிறது.
சர்வர் ஆக்சன்களுடன் தடையற்ற ஒருங்கிணைப்பு: குறிப்பாக ரியாக்ட் சர்வர் கூறுகள் மற்றும் சர்வர் ஆக்சன்களுடன் சிறப்பாகச் செயல்பட வடிவமைக்கப்பட்டுள்ளது.

அடிப்படை செயலாக்கம்

experimental_useFormStatus இன் அடிப்படை செயலாக்கத்தை விளக்க, ஒரு எளிய தொடர்பு படிவ உதாரணத்தைக் கருத்தில் கொள்வோம். இந்தப் படிவம் ஒரு பயனரின் பெயர், மின்னஞ்சல் மற்றும் செய்தியைச் சேகரித்து, பின்னர் அதை ஒரு சர்வர் ஆக்சனைப் பயன்படுத்தி சமர்ப்பிக்கும்.

முன் தேவைகள்

குறியீட்டிற்குள் செல்வதற்கு முன், உங்களிடம் பின்வருவனவற்றுடன் ஒரு ரியாக்ட் திட்டம் அமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்:

பரிசோதனை API-களை ஆதரிக்கும் ரியாக்ட் பதிப்பு (தேவையான பதிப்பிற்கு ரியாக்ட்டின் ஆவணங்களைப் பார்க்கவும்).
ரியாக்ட் சர்வர் கூறுகள் இயக்கப்பட்டிருக்க வேண்டும் (பொதுவாக Next.js அல்லது Remix போன்ற கட்டமைப்புகளில் பயன்படுத்தப்படுகிறது).

உதாரணம்: ஒரு எளிய தொடர்பு படிவம்

இதோ ஒரு அடிப்படை தொடர்பு படிவ கூறு:

```jsx // app/actions.js (Server Action) 'use server' export async function submitContactForm(formData) { // Simulate a database call or API request await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'All fields are required.' }; } try { // Replace with actual API call or database operation console.log('Form submitted:', { name, email, message }); return { success: true, message: 'Form submitted successfully!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'Failed to submit form.' }; } } // app/components/ContactForm.jsx (Client Component) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Name:

Email:

Message:

</div>
      <SubmitButton />
    </form>
  );
}
```

<ul>
  <li><b>சர்வர் ஆக்சன் (<code>app/actions.js</code>):</b> இந்த கோப்பு <code>submitContactForm</code> செயல்பாட்டை வரையறுக்கிறது, இது ஒரு சர்வர் ஆக்சன் ஆகும். படிவம் சமர்ப்பிப்பின் ஒத்திசைவற்ற தன்மையை நிரூபிக்க, இது 2 வினாடி தாமதத்துடன் ஒரு API கோரிக்கையை உருவகப்படுத்துகிறது. இது அடிப்படை சரிபார்ப்பு மற்றும் பிழை கையாளுதலையும் கையாள்கிறது.</li>
  <li><b>கிளையன்ட் கூறு (<code>app/components/ContactForm.jsx</code>):</b> இந்த கோப்பு <code>ContactForm</code> கூறுகளை வரையறுக்கிறது, இது ஒரு கிளையன்ட் கூறு ஆகும். இது <code>experimental_useFormStatus</code> hook மற்றும் <code>submitContactForm</code> ஆக்சனை இறக்குமதி செய்கிறது.</li>
  <li><b><code>useFormStatus</code> பயன்பாடு:</b> <code>SubmitButton</code> கூறுக்குள், <code>useFormStatus</code> அழைக்கப்படுகிறது. இந்த hook படிவத்தின் சமர்ப்பிப்பு நிலை குறித்த தகவலை வழங்குகிறது.</li>
  <li><b><code>pending</code> பண்பு:</b> <code>useFormStatus</code> மூலம் வழங்கப்படும் <code>pending</code> பண்பு, படிவம் தற்போது சமர்ப்பிக்கப்படுகிறதா என்பதைக் குறிக்கிறது. இது சமர்ப்பிப்பு பொத்தானை முடக்கவும் "சமர்ப்பிக்கப்படுகிறது..." என்ற செய்தியைக் காட்டவும் பயன்படுகிறது.</li>
  <li><b>படிவ பிணைப்பு:</b> <code>form</code> உறுப்பின் <code>action</code> பண்பு <code>submitContactForm</code> சர்வர் ஆக்சனுடன் பிணைக்கப்பட்டுள்ளது. இது படிவம் சமர்ப்பிக்கப்படும்போது சர்வர் ஆக்சனை அழைக்க ரியாக்ட்டிற்கு சொல்கிறது.</li>
</ul>

<h3>வெற்றி மற்றும் பிழை நிலைகளைக் கையாளுதல்</h3>

<p><code>experimental_useFormStatus</code> சமர்ப்பிப்பு நிலையை கண்காணிப்பதை எளிதாக்கும் அதே வேளையில், நீங்கள் பெரும்பாலும் வெற்றி மற்றும் பிழை நிலைகளை வெளிப்படையாகக் கையாள வேண்டும். சர்வர் ஆக்சன்கள் வெற்றி அல்லது தோல்வியைக் குறிக்கும் தரவை வழங்கலாம், அதை நீங்கள் UI-ஐ அதற்கேற்ப புதுப்பிக்கப் பயன்படுத்தலாம்.</p>

<p><b>உதாரணம்:</b></p>

```jsx
// app/components/ContactForm.jsx (Modified)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>செய்திகளுக்கான நிலை:</b> சர்வர் ஆக்சன் மூலம் வழங்கப்படும் முடிவைச் சேமிக்க ஒரு <code>message</code> நிலை மாறி அறிமுகப்படுத்தப்பட்டுள்ளது.</li>
  <li><b>முடிவைக் கையாளுதல்:</b> படிவம் சமர்ப்பிக்கப்பட்ட பிறகு, <code>handleSubmit</code> செயல்பாடு சர்வர் ஆக்சனிலிருந்து வரும் முடிவைக் கொண்டு <code>message</code> நிலையைப் புதுப்பிக்கிறது.</li>
  <li><b>செய்திகளைக் காண்பித்தல்:</b> இந்த கூறு, முடிவின் <code>success</code> பண்பின் அடிப்படையில் செய்தியைக் காண்பிக்கிறது, வெற்றி மற்றும் பிழை நிலைகளுக்கு வெவ்வேறு CSS வகுப்புகளைப் பயன்படுத்துகிறது.</li>
</ul>

<h3>படிப்படியான மேம்பாடு</h3>

<p><code>experimental_useFormStatus</code> படிப்படியான மேம்பாட்டு சூழ்நிலைகளில் பிரகாசிக்கிறது. ஒரு நிலையான HTML படிவத்தை ரியாக்ட் மூலம் படிப்படியாக மேம்படுத்துவதன் மூலம், ஜாவாஸ்கிரிப்ட் தோல்வியுற்றால் அடிப்படை செயல்பாட்டை இழக்காமல் சிறந்த பயனர் அனுபவத்தை வழங்க முடியும்.</p>

<p><b>உதாரணம்:</b></p>

<p>ஒரு அடிப்படை HTML படிவத்தில் இருந்து தொடங்குகிறது:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" required>

```

பின்னர் நீங்கள் அதை ரியாக்ட் மற்றும் experimental_useFormStatus மூலம் படிப்படியாக மேம்படுத்தலாம்.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Use null as initial state if not relying on it return (

Name:

Email:

Message:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<ul>
  <li><b>ஆரம்ப HTML படிவம்:</b> <code>public/contact.html</code> கோப்பில் ஒரு நிலையான HTML படிவம் உள்ளது, இது ஜாவாஸ்கிரிப்ட் இல்லாமலும் செயல்படும்.</li>
  <li><b>படிப்படியான மேம்பாடு:</b> <code>EnhancedContactForm</code> கூறு HTML படிவத்தை படிப்படியாக மேம்படுத்துகிறது. ஜாவாஸ்கிரிப்ட் இயக்கப்பட்டிருந்தால், ரியாக்ட் கட்டுப்பாட்டை எடுத்துக்கொண்டு ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது.</li>
  <li><b><code>useFormState</code> Hook:</b> படிவ நிலையை நிர்வகிப்பதற்கும் சர்வர் ஆக்சனை படிவத்துடன் பிணைப்பதற்கும் <code>useFormState</code> ஐப் பயன்படுத்துகிறது.</li>
	<li><b><code>state</code>:</b> <code>useFormState</code> இலிருந்து வரும் <code>state</code> இப்போது சர்வர் ஆக்சனிலிருந்து வரும் மதிப்பை வைத்திருக்கிறது, அதை வெற்றி அல்லது பிழை செய்திகளுக்காகச் சரிபார்க்கலாம்.</li>
</ul>

<p>உலகளாவிய பார்வையாளர்களுக்காக படிவங்களைச் செயல்படுத்தும்போது, பல சர்வதேச கருத்தாய்வுகள் கவனத்தில் கொள்ளப்பட வேண்டும்:</p>

<ul>
  <li><b>உள்ளூர்மயமாக்கல்:</b> உங்கள் படிவ லேபிள்கள், செய்திகள் மற்றும் பிழைச் செய்திகள் வெவ்வேறு மொழிகளில் உள்ளூர்மயமாக்கப்பட்டுள்ளதை உறுதிப்படுத்தவும். i18next போன்ற கருவிகள் மொழிபெயர்ப்புகளை நிர்வகிக்க உதவும்.</li>
  <li><b>தேதி மற்றும் எண் வடிவங்கள்:</b> பயனரின் இருப்பிடத்திற்கு ஏற்ப தேதி மற்றும் எண் வடிவங்களைக் கையாளவும். தேதிகள் மற்றும் எண்களைச் சரியாக வடிவமைக்க <code>Intl</code> அல்லது <code>moment.js</code> (தேதி வடிவமைப்புக்காக, இருப்பினும் இது இப்போது மரபுவழியாகக் கருதப்படுகிறது) போன்ற நூலகங்களைப் பயன்படுத்தவும்.</li>
  <li><b>முகவரி வடிவங்கள்:</b> வெவ்வேறு நாடுகளில் வெவ்வேறு முகவரி வடிவங்கள் உள்ளன. பல முகவரி வடிவங்களை ஆதரிக்கும் ஒரு நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும் அல்லது பயனரின் இருப்பிடத்தின் அடிப்படையில் தனிப்பயன் படிவ புலங்களை உருவாக்கவும்.</li>
  <li><b>தொலைபேசி எண் சரிபார்ப்பு:</b> சர்வதேச தரநிலைகளின்படி தொலைபேசி எண்களைச் சரிபார்க்கவும். <code>libphonumber-js</code> போன்ற நூலகங்கள் இதற்கு உதவலாம்.</li>
  <li><b>வலமிருந்து இடமாக (RTL) ஆதரவு:</b> அரபு அல்லது ஹீப்ரு போன்ற RTL மொழிகளை உங்கள் படிவ அமைப்பு ஆதரிக்கிறதா என்பதை உறுதிப்படுத்தவும். சிறந்த RTL ஆதரவிற்காக CSS தர்க்கரீதியான பண்புகளைப் பயன்படுத்தவும் (எ.கா., <code>margin-left</code> க்குப் பதிலாக <code>margin-inline-start</code>).</li>
  <li><b>அணுகல்தன்மை:</b> உங்கள் படிவங்கள் மாற்றுத்திறனாளிகளால், அவர்களின் இருப்பிடத்தைப் பொருட்படுத்தாமல் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய அணுகல்தன்மை வழிகாட்டுதல்களை (WCAG) பின்பற்றவும்.</li>
</ul>

<p><b>உதாரணம்: உள்ளூர்மயமாக்கப்பட்ட படிவ லேபிள்கள்</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/fr.json
{
  "contactForm": {
    "nameLabel": "Nom",
    "emailLabel": "Courriel",
    "messageLabel": "Message",
    "submitButton": "Soumettre",
    "successMessage": "Formulaire soumis avec succès !",
    "errorMessage": "Échec de la soumission du formulaire."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>மொழிபெயர்ப்பு கோப்புகள்:</b> இந்த உதாரணம் மொழிபெயர்ப்புகளை நிர்வகிக்க <code>react-i18next</code> ஐப் பயன்படுத்துகிறது. தனித்தனி JSON கோப்புகளில் வெவ்வேறு மொழிகளுக்கான மொழிபெயர்ப்புகள் உள்ளன.</li>
  <li><b><code>useTranslation</code> Hook:</b> <code>useTranslation</code> hook மொழிபெயர்ப்பு செயல்பாட்டிற்கான (<code>t</code>) அணுகலை வழங்குகிறது, இது உள்ளூர்மயமாக்கப்பட்ட சரங்களைப் பெறப் பயன்படுகிறது.</li>
  <li><b>உள்ளூர்மயமாக்கப்பட்ட லேபிள்கள்:</b> படிவ லேபிள்கள் மற்றும் பொத்தான் உரை <code>t</code> செயல்பாட்டைப் பயன்படுத்திப் பெறப்படுகின்றன, அவை பயனரின் விருப்பமான மொழியில் காட்டப்படுவதை உறுதி செய்கிறது.</li>
</ul>

<h3>அணுகல்தன்மை கருத்தாய்வுகள்</h3>

<p>மாற்றுத்திறனாளிகள் உட்பட அனைத்து பயனர்களுக்கும் உங்கள் படிவங்கள் அணுகக்கூடியதாக இருப்பதை உறுதி செய்வது முக்கியம். இங்கே சில முக்கிய அணுகல்தன்மை கருத்தாய்வுகள்:</p>

<ul>
  <li><b>பொருளுணர் HTML:</b> <code><label></code>, <code><input></code>, <code><textarea></code>, மற்றும் <code><button></code> போன்ற பொருளுணர் HTML கூறுகளைச் சரியாகப் பயன்படுத்தவும்.</li>
  <li><b>லேபிள்கள்:</b> <code><label></code> இல் <code>for</code> பண்புக்கூறு மற்றும் படிவக் கட்டுப்பாட்டில் <code>id</code> பண்புக்கூறு ஆகியவற்றைப் பயன்படுத்தி லேபிள்களை படிவக் கட்டுப்பாடுகளுடன் இணைக்கவும்.</li>
  <li><b>ARIA பண்புக்கூறுகள்:</b> உதவித் தொழில்நுட்பங்களுக்கு கூடுதல் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும். உதாரணமாக, ஒரு படிவக் கட்டுப்பாட்டை ஒரு விளக்கத்துடன் இணைக்க <code>aria-describedby</code> ஐப் பயன்படுத்தவும்.</li>
  <li><b>பிழை கையாளுதல்:</b> பிழைகளைத் தெளிவாகக் குறிப்பிட்டு பயனுள்ள பிழைச் செய்திகளை வழங்கவும். தவறான படிவக் கட்டுப்பாடுகளைக் குறிக்க <code>aria-invalid</code> போன்ற ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.</li>
  <li><b>விசைப்பலகை வழிசெலுத்தல்:</b> பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி படிவத்தில் செல்ல முடியும் என்பதை உறுதிப்படுத்தவும். தேவைப்பட்டால் ஃபோகஸ் வரிசையைக் கட்டுப்படுத்த <code>tabindex</code> பண்புக்கூறைப் பயன்படுத்தவும்.</li>
  <li><b>வண்ண வேறுபாடு:</b> உரைக்கும் பின்னணி வண்ணங்களுக்கும் இடையில் போதுமான வண்ண வேறுபாட்டை உறுதிப்படுத்தவும்.</li>
  <li><b>படிவ அமைப்பு:</b> தெளிவான மற்றும் நிலையான படிவ அமைப்பைப் பயன்படுத்தவும். தொடர்புடைய படிவக் கட்டுப்பாடுகளை <code><fieldset></code> மற்றும் <code><legend></code> கூறுகளைப் பயன்படுத்தி தொகுக்கவும்.</li>
</ul>

<p><b>உதாரணம்: அணுகக்கூடிய பிழை கையாளுதல்</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Basic client-side validation
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Name is required.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email is required.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Message is required.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Clear previous errors
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>பிழை நிலை:</b> இந்த கூறு சரிபார்ப்புப் பிழைகளைக் கண்காணிக்க ஒரு <code>errors</code> நிலையைப் பராமரிக்கிறது.</li>
  <li><b>கிளையன்ட்-பக்க சரிபார்ப்பு:</b> <code>handleSubmit</code> செயல்பாடு படிவத்தைச் சமர்ப்பிக்கும் முன் அடிப்படை கிளையன்ட்-பக்க சரிபார்ப்பைச் செய்கிறது.</li>
  <li><b>ARIA பண்புக்கூறுகள்:</b> ஒரு குறிப்பிட்ட படிவக் கட்டுப்பாட்டிற்கு ஒரு பிழை இருந்தால் <code>aria-invalid</code> பண்புக்கூறு <code>true</code> என அமைக்கப்படுகிறது. <code>aria-describedby</code> பண்புக்கூறு படிவக் கட்டுப்பாட்டை பிழைச் செய்தியுடன் இணைக்கிறது.</li>
  <li><b>பிழைச் செய்திகள்:</b> பிழைச் செய்திகள் அதனுடன் தொடர்புடைய படிவக் கட்டுப்பாடுகளுக்கு அடுத்து காட்டப்படுகின்றன.</li>
</ul>

<h2>சாத்தியமான சவால்கள் மற்றும் வரம்புகள்</h2>

<ul>
  <li><b>பரிசோதனை நிலை:</b> ஒரு பரிசோதனை API என்பதால், <code>experimental_useFormStatus</code> எதிர்கால ரியாக்ட் பதிப்புகளில் மாற்றப்படலாம் அல்லது அகற்றப்படலாம். ரியாக்ட்டின் ஆவணங்களுடன் புதுப்பித்த நிலையில் இருப்பது மற்றும் தேவைப்பட்டால் உங்கள் குறியீட்டை மாற்றியமைக்கத் தயாராக இருப்பது அவசியம்.</li>
  <li><b>வரையறுக்கப்பட்ட நோக்கம்:</b> இந்த hook முக்கியமாக சமர்ப்பிப்பு நிலையைக் கண்காணிப்பதில் கவனம் செலுத்துகிறது மற்றும் சரிபார்ப்பு அல்லது தரவு கையாளுதல் போன்ற விரிவான படிவ மேலாண்மை அம்சங்களை வழங்காது. இந்த அம்சங்களுக்கு நீங்கள் கூடுதல் தர்க்கத்தைச் செயல்படுத்த வேண்டியிருக்கலாம்.</li>
  <li><b>சர்வர் ஆக்சன் சார்பு:</b> இந்த hook சர்வர் ஆக்சன்களுடன் வேலை செய்ய வடிவமைக்கப்பட்டுள்ளது, இது எல்லா பயன்பாட்டு நிகழ்வுகளுக்கும் பொருந்தாது. நீங்கள் சர்வர் ஆக்சன்களைப் பயன்படுத்தவில்லை என்றால், படிவ நிலையை நிர்வகிக்க மாற்றுத் தீர்வுகளைக் கண்டறிய வேண்டியிருக்கலாம்.</li>
</ul>

<h2>முடிவுரை</h2>

<p><code>experimental_useFormStatus</code> hook ரியாக்ட்டில் படிவம் சமர்ப்பிப்பு நிலைகளை நிர்வகிப்பதில் குறிப்பிடத்தக்க முன்னேற்றத்தை வழங்குகிறது, குறிப்பாக சர்வர் ஆக்சன்கள் மற்றும் படிப்படியான மேம்பாட்டுடன் பணிபுரியும்போது. நிலை மேலாண்மையை எளிதாக்குவதன் மூலமும் தெளிவான மற்றும் சுருக்கமான API-ஐ வழங்குவதன் மூலமும், இது டெவலப்பர் அனுபவம் மற்றும் பயனர் அனுபவம் இரண்டையும் மேம்படுத்துகிறது. இருப்பினும், அதன் பரிசோதனைத் தன்மையைக் கருத்தில் கொண்டு, எதிர்கால ரியாக்ட் பதிப்புகளில் புதுப்பிப்புகள் மற்றும் சாத்தியமான மாற்றங்கள் குறித்துத் தகவல் அறிந்திருப்பது முக்கியம். அதன் நன்மைகள், வரம்புகள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் ரியாக்ட் பயன்பாடுகளில் மேலும் வலுவான மற்றும் பயனர்-நட்பு படிவங்களை உருவாக்க <code>experimental_useFormStatus</code> ஐ திறம்படப் பயன்படுத்தலாம். உலகளாவிய பார்வையாளர்களுக்காக உள்ளடக்கிய படிவங்களை உருவாக்க சர்வதேசமயமாக்கல் மற்றும் அணுகல்தன்மை சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ரியாக்ட்</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">யூஸ்ஃபார்ம்ஸ்டேட்டஸ்</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">படிவ நிலை</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ரியாக்ட் படிவங்கள்</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">பரிசோதனை API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ரியாக்ட் ஹூக்ஸ்</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">படிவம் சமர்ப்பிப்பு</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ஒத்திசைவற்ற படிவங்கள்</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">படிப்படியான மேம்பாடு</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template></div><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="ரியாக்ட் experimental_useFormStatus செயலாக்கம்: மேம்படுத்தப்பட்ட படிவ நிலை மேலாண்மை"/><meta property="og:description" content="ரியாக்ட்டின் experimental_useFormStatus hook-ஐப் பயன்படுத்தி நெறிப்படுத்தப்பட்ட படிவ நிலை மேலாண்மையைக் கண்டறியுங்கள். நிஜ உலக உதாரணங்களுடன் அதன் செயலாக்கம், நன்மைகள் மற்றும் மேம்பட்ட பயன்பாட்டைக் கற்றுக்கொள்ளுங்கள்."/><meta property="og:url" content="https://mlog.uz/ta/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="ta"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:51.866Z"/><meta property="article:modified_time" content="2025-09-02T08:47:51.866Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="ரியாக்ட்"/><meta property="article:tag" content="யூஸ்ஃபார்ம்ஸ்டேட்டஸ்"/><meta property="article:tag" content="படிவ நிலை"/><meta property="article:tag" content="ரியாக்ட் படிவங்கள்"/><meta property="article:tag" content="பரிசோதனை API"/><meta property="article:tag" content="ரியாக்ட் ஹூக்ஸ்"/><meta property="article:tag" content="படிவம் சமர்ப்பிப்பு"/><meta property="article:tag" content="ஒத்திசைவற்ற படிவங்கள்"/><meta property="article:tag" content="படிப்படியான மேம்பாடு"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="ரியாக்ட் experimental_useFormStatus செயலாக்கம்: மேம்படுத்தப்பட்ட படிவ நிலை மேலாண்மை"/><meta name="twitter:description" content="ரியாக்ட்டின் experimental_useFormStatus hook-ஐப் பயன்படுத்தி நெறிப்படுத்தப்பட்ட படிவ நிலை மேலாண்மையைக் கண்டறியுங்கள். நிஜ உலக உதாரணங்களுடன் அதன் செயலாக்கம், நன்மைகள் மற்றும் மேம்பட்ட பயன்பாட்டைக் கற்றுக்கொள்ளுங்கள்."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><script>$RC("B:0","S:0")</script></body></html>

ரியாக்ட் experimental_useFormStatus செயலாக்கம்: மேம்படுத்தப்பட்ட படிவ நிலை மேலாண்மை

experimental_useFormStatus என்றால் என்ன?

அடிப்படை செயலாக்கம்

முன் தேவைகள்

உதாரணம்: ஒரு எளிய தொடர்பு படிவம்

`experimental_useFormStatus` என்றால் என்ன?