தமிழ்

React-இன் useFormState ஹூக்கைப் பயன்படுத்தி படிவக் கையாளுதலை சீரமைத்து, செயல்திறனை மேம்படுத்தி, பயனர் அனுபவங்களை மெருகூட்டவும். வலுவான மற்றும் திறமையான படிவங்களை உருவாக்க சிறந்த நடைமுறைகள் மற்றும் மேம்பட்ட நுட்பங்களைக் கற்றுக்கொள்ளுங்கள்.

React useFormState: உகந்த பயனர் அனுபவங்களுக்கான படிவக் கையாளுதலில் தேர்ச்சி பெறுதல்

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

React useFormState என்றால் என்ன?

useFormState என்பது ஒரு React ஹூக் ஆகும், இது நிலை மற்றும் புதுப்பிப்பு தர்க்கத்தை ஒரே ஹூக்கிற்குள் உள்ளடக்கி படிவ நிலை நிர்வாகத்தை எளிதாக்குகிறது. இது குறிப்பாக React Server Components மற்றும் Server Actions உடன் இணைந்து செயல்பட வடிவமைக்கப்பட்டுள்ளது, படிவச் செயலாக்கத்தை சர்வரில் இறக்குவதன் மூலம் படிப்படியான மேம்பாடு மற்றும் மேம்பட்ட செயல்திறனை செயல்படுத்துகிறது.

முக்கிய அம்சங்கள் மற்றும் நன்மைகள்:

useFormState ஹூக்கைப் புரிந்துகொள்ளுதல்

useFormState ஹூக் இரண்டு வாதங்களை எடுக்கிறது:

  1. சர்வர் செயல்பாடு: படிவம் சமர்ப்பிக்கப்படும்போது செயல்படுத்தப்படும் ஒரு செயல்பாடு. இந்தச் செயல்பாடு பொதுவாக படிவ சரிபார்ப்பு, தரவு செயலாக்கம் மற்றும் தரவுத்தள புதுப்பிப்புகளைக் கையாளுகிறது.
  2. ஆரம்ப நிலை: படிவ நிலையின் ஆரம்ப மதிப்பு. இது ஒரு பொருள், வரிசை அல்லது பழமையான மதிப்பு போன்ற எந்த JavaScript மதிப்பாகவும் இருக்கலாம்.

இந்த ஹூக் இரண்டு மதிப்புகளைக் கொண்ட ஒரு வரிசையைத் தருகிறது:

  1. படிவ நிலை: படிவ நிலையின் தற்போதைய மதிப்பு.
  2. படிவ செயல்பாடு: form உறுப்பின் action ப்ராப்பிற்கு நீங்கள் அனுப்பும் ஒரு செயல்பாடு. இந்தச் செயல்பாடு படிவம் சமர்ப்பிக்கப்படும்போது சர்வர் செயல்பாட்டைத் தூண்டுகிறது.

அடிப்படை எடுத்துக்காட்டு:

பயனர்கள் தங்கள் பெயர் மற்றும் மின்னஞ்சல் முகவரியைச் சமர்ப்பிக்க அனுமதிக்கும் ஒரு எளிய தொடர்புப் படிவத்தின் எடுத்துக்காட்டைக் கருத்தில் கொள்வோம்.

// சர்வர் செயல்பாடு (எடுத்துக்காட்டு - வேறு இடத்தில் வரையறுக்கப்பட வேண்டும்)
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 செயல்பாட்டை வழங்குகிறது, இது form உறுப்பின் action ப்ராப்பிற்கு அனுப்பப்படுகிறது. படிவம் சமர்ப்பிக்கப்படும்போது, 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) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const value = formData.get('value');

    setOptimisticValue(value);
    setIsSubmitting(true);
    
    await action(formData);

    setIsSubmitting(false);
  };

  return (
    


{state?.message &&

{state.message}

}
); }

இந்த எடுத்துக்காட்டில், தாமதமான சர்வர் பதிலை நாங்கள் உருவகப்படுத்துகிறோம். சர்வர் செயல்பாடு முடிவதற்குள், உள்ளீட்டு புலம் சமர்ப்பிக்கப்பட்ட மதிப்புடன் முன்கூட்டியே புதுப்பிக்கப்படுகிறது. சர்வர் செயல்பாடு தோல்வியுற்றால் (மதிப்பை 'error' என்று சமர்ப்பிப்பதன் மூலம் உருவகப்படுத்தப்படுகிறது), உள்ளீட்டு புலம் அதன் முந்தைய நிலைக்குத் திரும்பும்.

3. கோப்பு பதிவேற்றங்களைக் கையாளுதல்:

useFormState கோப்பு பதிவேற்றங்களைக் கையாளவும் பயன்படுத்தப்படலாம். FormData பொருள் தானாகவே கோப்புத் தரவைக் கையாளுகிறது. இதோ ஒரு எடுத்துக்காட்டு:

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

  if (!file || file.size === 0) {
    return { message: 'தயவுசெய்து ஒரு கோப்பைத் தேர்ந்தெடுக்கவும்.' };
  }

  // கோப்பை பதிவேற்றுவதை உருவகப்படுத்தவும்
  await new Promise(resolve => setTimeout(resolve, 1000));

  // நீங்கள் பொதுவாக கோப்பை இங்கே ஒரு சர்வருக்கு பதிவேற்றுவீர்கள்
  console.log('கோப்பு பதிவேற்றப்பட்டது:', 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 பிழைகளைக் கையாள்வதற்கும் பயனர்களுக்குக் கருத்துக்களை வழங்குவதற்கும் வழிமுறைகளை வழங்குவதன் மூலம் அணுகக்கூடிய படிவங்களை உருவாக்க உதவும். இதோ சில அணுகல்தன்மை சிறந்த நடைமுறைகள்:

useFormState-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

useFormState ஹூக்கிலிருந்து அதிகப் பயனைப் பெற, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளவும்:

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

useFormState பரந்த அளவிலான நிஜ உலகப் பயன்பாடுகளில் பயன்படுத்தப்படலாம். இதோ சில எடுத்துக்காட்டுகள்:

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

மற்றொரு எடுத்துக்காட்டு பயனர் பதிவு படிவம். useFormState-ஐப் பயன்படுத்தி, பயனர்பெயர்கள், கடவுச்சொற்கள் மற்றும் மின்னஞ்சல் முகவரிகளின் சரிபார்ப்பை சர்வரில் கையாளலாம். இது தரவு பாதுகாப்பாக இருப்பதையும் பயனர் சரியாக அங்கீகரிக்கப்படுவதையும் உறுதிசெய்கிறது.

முடிவுரை

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