React useFormState: Zamonaviy Formalar Bilan Ishlash Uchun To'liq Qo'llanma

Veb-dasturlashning doimiy rivojlanib borayotgan olamida forma holatini boshqarish har doim markaziy muammo bo'lib kelgan. Oddiy aloqa formalaridan tortib murakkab ko'p bosqichli sehrgarlargacha, dasturchilar ishonchli, foydalanuvchiga qulay va qo'llab-quvvatlash oson bo'lgan usullarni izlashgan. React Server Components va Server Actions paydo bo'lishi bilan paradigma yana bir bor o'zgarmoqda. Sahнага `useFormState` — mijoz tomonidagi foydalanuvchi o'zaro ta'sirlari va serverdagi ma'lumotlarni qayta ishlash o'rtasidagi bo'shliqni to'ldirish uchun mo'ljallangan kuchli hook chiqadi va yanada uzluksiz hamda integratsiyalashgan tajribani yaratadi.

Ushbu keng qamrovli qo'llanma butun dunyodagi React dasturchilari uchun mo'ljallangan. Siz oddiy marketing sayti yoki murakkab, ma'lumotlarga asoslangan korporativ dastur yaratayotgan bo'lsangiz ham, `useFormState`'ni tushunish zamonaviy, samarali va barqaror React kodini yozish uchun juda muhimdir. Biz uning asosiy tushunchalarini, amaliy qo'llanilishini, ilg'or usullarini va butun dunyo bo'ylab foydalanuvchilar uchun yaxshiroq veb-tajribalarni yaratishga qanday hissa qo'shishini o'rganamiz.

`useFormState` Aslida Nima?

Aslini olganda, `useFormState` — bu komponentga o'z holatini forma amali natijasiga qarab yangilash imkonini beruvchi React Hook'idir. U mijoz komponentlariga serverda ishlaydigan funksiyalarni to'g'ridan-to'g'ri chaqirish imkonini beruvchi xususiyat — Server Actions bilan ishlash uchun maxsus ishlab chiqilgan, ammo u mijoz tomonida ishlaydigan amallar bilan ham ishlatilishi mumkin.

Uni forma yuborishning so'rov-javob sikli uchun ixtisoslashtirilgan holat menejeri deb o'ylang. Foydalanuvchi formani yuborganida, `useFormState` serverdan qaytgan ma'lumotlarni — masalan, muvaffaqiyat xabarlari, validatsiya xatolari yoki yangilangan ma'lumotlarni — boshqarishga yordam beradi va uni foydalanuvchi interfeysida aks ettiradi.

Sintaksis va Parametrlar

Hookning imzosi sodda va nafis:

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

Keling, har bir qismni tahlil qilamiz:

• action: Bu forma yuborilganda bajariladigan funksiya. Odatda bu Server Action bo'ladi. Bu funksiya ikkita argumentni qabul qilishi kerak: formaning oldingi holati va formaning ma'lumotlari.
• initialState: Bu forma hali yuborilmasidan oldin holatning qanday qiymatga ega bo'lishini xohlasangiz, o'sha qiymat. U `null` kabi oddiy qiymat yoki masalan, { message: '', errors: {} } kabi murakkabroq obyekt bo'lishi mumkin.

Hook ikkita elementdan iborat massiv qaytaradi:

• state: Formaning joriy holati. Dastlabki renderda u `initialState` qiymatini saqlaydi. Forma yuborilgandan so'ng, u sizning `action` funksiyangiz tomonidan qaytarilgan qiymatni saqlaydi. Bu sizning UI'ngizda fikr-mulohazalarni ko'rsatish uchun ishlatadigan reaktiv ma'lumot qismidir.
• formAction: Sizning action funksiyangizning yangi, o'ralgan versiyasi. Siz bu `formAction`'ni `
  ` elementingizning `action` prop'iga uzatishingiz kerak. React bu o'ralgan action'dan holat yangilanishlarini parda ortida boshqarish uchun foydalanadi.

`useFormState` Hal Qiladigan Muammo: Global Nuqtai Nazar

`useFormState` va Server Actions'dan oldin, React'da formalarni boshqarish odatda katta miqdordagi mijoz tomonidagi shablon kodni o'z ichiga olardi. Bu jarayon odatda quyidagicha ko'rinardi:

1. Mijoz Tomonidagi Holat: Forma kiritishlari, yuklanish holati va xato xabarlarini boshqarish uchun `useState` dan foydalanish.
2. Hodisa Ishlovchilari: Standart forma yuborilishining oldini olish uchun `onSubmit` ishlovchi funksiyasini yozish.
3. Ma'lumotlarni Olish: Ishlovchi ichida so'rov tanasini qo'lda tuzish va ma'lumotlarni server API endpoint'iga yuborish uchun `fetch` yoki Axios kabi kutubxonadan foydalanish.
4. Holatni Yangilash: Yuklanish holatini qo'lda yangilash va javob olingandan so'ng, uni tahlil qilib, xato yoki muvaffaqiyat xabari holatini yangilash.

Bu yondashuvning bir nechta kamchiliklari bor, ayniqsa global ilovalar uchun:

• Yuqori Shablon Kod: Har bir forma o'xshash, ammo alohida holat boshqaruvi mantig'ini talab qilar edi, bu esa takrorlanuvchi kodga olib kelardi.
• Tarmoq Kechikishi Muammolari: Kechikish yuqori bo'lgan hududlardagi foydalanuvchilar uchun "yuborish" tugmasini bosish va fikr-mulohazani ko'rish o'rtasidagi uzilish sezilarli bo'lishi mumkin. Optimistik UI yangilanishlari mumkin, ammo bu yana bir murakkablik qatlamini qo'shadi.
• JavaScript'ga Bog'liqlik: Butun forma yuborish mantig'i JavaScript'ga bog'liq. Agar skript yuklanmasa yoki o'chirib qo'yilgan bo'lsa, forma umuman ishlamaydi. Bu turli qurilmalar va tarmoq sharoitlariga ega global foydalanuvchilar bazasi uchun muhim kirish imkoniyati va barqarorlik muammosidir.
• Mijoz-Server Aloqasining Uzilishi: Mijoz va server mantig'i butunlay alohida. Serverda validatsiya qilish va keyin bu xatolarni mijozda ko'rsatish ehtiyotkorlik bilan ishlab chiqilgan API shartnomasini talab qiladi.

`useFormState` Server Actions bilan birgalikda bu muammolarni nafis hal qiladi. U forma UI va server mantig'i o'rtasida to'g'ridan-to'g'ri, holatga ega kanal yaratadi. U sukut bo'yicha progressiv yaxshilanishni ta'minlaydi — forma JavaScript'siz ishlaydi — va forma yuborishlarini boshqarish uchun zarur bo'lgan mijoz tomonidagi kod miqdorini keskin kamaytiradi.

Amaliy Qo'llanma: Xalqaro Obuna Formasini Yaratish

Keling, amaliy misol yaratamiz: global xizmat uchun yangiliklar byulleteniga obuna bo'lish formasi. Biz validatsiyani serverda bajaramiz va foydalanuvchiga tegishli xabarlarni ko'rsatamiz.

1-qadam: Server Action'ni Aniqlash

Birinchidan, biz serverda ishlaydigan funksiyani yaratishimiz kerak. Next.js ilovasida siz odatda buni tepasida `'use server'` direktivasi bilan belgilangan faylga joylashtirasiz.

Ushbu funksiya, keling uni `subscribeAction` deb ataymiz, oldingi holatni va formadan `FormData`'ni qabul qiladi. U validatsiyani amalga oshiradi va yangi holat obyektini qaytaradi.

Fayl: `app/actions.js`

            
'use server';

// Namoyish maqsadida tarmoq kechikishini simulyatsiya qilish uchun oddiy utilita.
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export async function subscribeAction(prevState, formData) {
  const email = formData.get('email');

  // Server tomonidagi oddiy validatsiya
  if (!email || !email.includes('@')) {
    return { message: 'Iltimos, yaroqli elektron pochta manzilini kiriting.', status: 'error' };
  }

  // Ma'lumotlar bazasiga murojaat yoki API so'rovini simulyatsiya qilish
  console.log(`${email} yangiliklar byulleteniga obuna bo'lmoqda...`);
  await sleep(1500);

  // Uchinchi tomon xizmatidan yuzaga kelishi mumkin bo'lgan xatolikni simulyatsiya qilish
  if (email === 'fail@example.com') {
    return { message: 'Ushbu elektron pochta manzili bloklangan. Iltimos, boshqasidan foydalaning.', status: 'error' };
  }

  // Muvaffaqiyatli holatda
  return { message: `Obuna bo'lganingiz uchun rahmat, ${email}!`, status: 'success' };
}

            

              
                Copy
              
            
          

Funksiya imzosi haqida eslatma: `subscribeAction` funksiyasi birinchi argument sifatida `prevState`'ni qabul qiladi. Bu `useFormState` bilan ishlatiladigan har qanday funksiya uchun talabdir. Ikkinchi argument, `formData`, standart FormData obyekti bo'lib, u sizga `formData.get('inputName')` orqali forma kiritish qiymatlariga oson kirish imkonini beradi.

2-qadam: `useFormState` Bilan Forma Komponentini Yaratish

Endi, keling React komponentimizni yaratamiz. Ushbu komponent `useFormState` hook'idan `subscribeAction`'imizdan keladigan fikr-mulohazalarni boshqarish uchun foydalanadi.

Fayl: `app/subscription-form.js`

            
'use client';

import { useFormState } from 'react-dom';
import { subscribeAction } from './actions';

const initialState = {
  message: null,
  status: null,
};

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribeAction, initialState);

  return (
    
      
Bizning Global Yangiliklar Byulletenimizga Obuna Bo'ling
      
Butun dunyodagi yangiliklar va tahlillardan xabardor bo'ling.
      
      

        Elektron Pochta Manzili:
        
      

      Obuna Bo'lish

      {state?.message && (
        

          {state.message}
        
      )}
    
  );
}

            

              
                Copy
              
            
          

Keling, bu yerda nima bo'layotganini tahlil qilamiz:

1. Biz `useFormState`'ni `react-dom`'dan import qilamiz. E'tibor bering, u `react`'dan emas, balki `react-dom`'dan keladi, chunki u DOM renderi va formani boshqarish mantig'iga bog'liq.
2. Biz `initialState` obyektini aniqlaymiz. Bu birinchi renderda `state`'ning qiymati bo'ladi.
3. `state` obyekti va o'ralgan `formAction`'ni olish uchun `useFormState(subscribeAction, initialState)`'ni chaqiramiz.
4. Biz qaytarilgan `formAction`'ni to'g'ridan-to'g'ri `
   ` elementining `action` prop'iga uzatamiz. Bu sehrli bog'lanishdir.
5. Biz `state.message` null bo'lmaganda uni ko'rsatish uchun shartli ravishda paragrafni render qilamiz. Hatto muvaffaqiyat va xato xabarlari uchun turli xil uslublarni qo'llash uchun `state.status`'dan foydalanishimiz mumkin.

Ushbu sozlama bilan, foydalanuvchi formani yuborganida, React serverda `subscribeAction`'ni chaqiradi. Funksiya ishlaydi va uning qaytarilgan qiymati komponentimizda yangi `state`'ga aylanadi, bu esa fikr-mulohazani ko'rsatish uchun qayta renderga sabab bo'ladi. Bularning barchasi qo'lda `fetch` chaqiruvlarisiz yoki server javoblari uchun `useState` hook'larisiz amalga oshiriladi.

3-qadam: Foydalanuvchi Tajribasini `useFormStatus` Bilan Yaxshilash

Bizning formamiz funksional, lekin unda UX'ning muhim bir qismi yetishmayapti: yuborish jarayonida fikr-mulohaza. Bizning server action'imizda sun'iy 1.5 soniyalik kechikish bor, ammo UI hech narsa bo'layotganini ko'rsatmaydi. Sekin ulanishga ega foydalanuvchilar tugmani bir necha marta bosishlari mumkin, uni buzilgan deb o'ylab.

Bu yerda yordamchi hook, `useFormStatus`, yordamga keladi. U ota-ona `` yuborilishining holati haqida ma'lumot beradi.

Muhim Qoida: `useFormStatus` faqat `` elementining avlodi bo'lgan komponent ichida ishlatilishi mumkin. Uni ``'ni o'zini render qiladigan komponentda ishlatib bo'lmaydi.

Keling, maxsus `SubmitButton` komponentini yaratamiz.

Fayl: `app/submit-button.js`

            
'use client';

import { useFormStatus } from 'react-dom';

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

  return (
    
      {pending ? 'Obuna bo\'linmoqda...' : 'Obuna Bo\'lish'}
    
  );
}

            

              
                Copy
              
            
          

`useFormStatus` hook'i `pending` mantiqiy (boolean) qiymatini o'z ichiga olgan obyektni qaytaradi. Bu mantiqiy qiymat forma yuborilayotganda `true` va aks holda `false` bo'ladi. Biz undan tugmani o'chirib qo'yish va uning matnini o'zgartirish uchun foydalanamiz, bu esa aniq vizual fikr-mulohazani ta'minlaydi.

Endi biz `SubscriptionForm`'imizni ushbu yangi komponentdan foydalanish uchun yangilaymiz.

Fayl: `app/subscription-form.js` (Yangilangan)

            
'use client';

import { useFormState } from 'react-dom';
import { subscribeAction } from './actions';
import { SubmitButton } from './submit-button'; // Yangi komponentni import qilish

// ... initialState o'zgarishsiz qoladi

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribeAction, initialState);

  return (
    
      {/* ... forma tarkibi ... */}
      

        Elektron Pochta Manzili:
        
      

       {/* Yangi tugma komponentidan foydalanish */}

      {/* ... xabar ko'rsatish ... */}
    
  );
}

            

              
                Copy
              
            
          

Endi bizning formamiz to'liq, professional foydalanuvchi tajribasini taqdim etadi. U yuborish paytida kutish holatini ko'rsatadi va keyin aniq muvaffaqiyat yoki xato xabarini ko'rsatadi. Va bularning barchasi minimal, deklarativ kod bilan amalga oshiriladi.

Ilg'or Konsepsiyalar va Eng Yaxshi Amaliyotlar

Asoslarni o'zlashtirganingizdan so'ng, siz `useFormState`'dan murakkabroq stsenariylar uchun foydalanishingiz mumkin.

Maydonlarga Xos Validatsiya Xatolarini Boshqarish

Bir nechta maydonga ega formalar uchun bitta xato xabari yetarli emas. Siz foydalanuvchilarga aynan qaysi maydonlar noto'g'ri ekanligini ko'rsatishingiz kerak. Bunga biz server action'imizdan yanada tuzilgan holat obyektini qaytarish orqali erishishimiz mumkin.

Keling, server action'imizni ism va elektron pochta maydonlarini boshqarish uchun kengaytiramiz.

Fayl: `app/actions.js` (Kengaytirilgan)

            
'use server';

export async function complexSubscribeAction(prevState, formData) {
  await new Promise(res => setTimeout(res, 1000)); // Kechikishni simulyatsiya qilish
  const name = formData.get('name');
  const email = formData.get('email');
  const errors = {};

  if (!name || name.trim().length < 2) {
    errors.name = 'Ism kamida 2 belgidan iborat bo\'lishi kerak.';
  }

  if (!email || !email.includes('@')) {
    errors.email = 'Iltimos, yaroqli elektron pochta manzilini kiriting.';
  }

  if (Object.keys(errors).length > 0) {
    return { message: 'Validatsiya muvaffaqiyatsiz tugadi. Iltimos, maydonlarni tekshiring.', errors };
  }

  // Muvaffaqiyatli holat
  return { message: `Xush kelibsiz, ${name}!`, errors: null };
}

            

              
                Copy
              
            
          

Keyin bizning komponentimiz ushbu batafsil xato obyektidan tegishli kiritishlar yonida xabarlarni ko'rsatish uchun foydalanishi mumkin.

Komponent parchasi:

            
const initialState = { message: null, errors: {} };
const [state, formAction] = useFormState(complexSubscribeAction, initialState);

// ... JSX ichida

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


  Elektron pochta:
  
  {state.errors?.email && 
{state.errors.email}
}


            

              
                Copy
              
            
          

Ushbu usul to'liq stekli validatsiyani amalga oshirishning ishonchli usulini ta'minlaydi, bu yerda validatsiya mantig'ining yagona haqiqat manbai serverda joylashgan, ammo fikr-mulohaza mijoz tomonidagi UI'ga uzluksiz integratsiya qilingan.

Progressiv Yaxshilanish: Global Superkuch

Ushbu usulning eng chuqur afzalliklaridan biri bu progressiv yaxshilanishdir. Agar foydalanuvchida JavaScript o'chirilgan bo'lsa yoki mijoz tomonidagi skriptlar yomon tarmoq aloqasi tufayli yuklanmasa (dunyoning ko'p qismlarida keng tarqalgan stsenariy), forma baribir ishlaydi!

JavaScript'siz formani yuborish to'liq sahifani qayta yuklashga olib keladi. Server action ishlaydi va server sahifani yangi holat bilan qayta render qiladi. Foydalanuvchi bir xil validatsiya xabarlarini yoki muvaffaqiyat tasdig'ini ko'radi, faqat an'anaviy sahifa qayta yuklanishi orqali yetkaziladi. JavaScript yoqilganida, foydalanuvchi sahifani yangilamasdan, joyida yangilanishning yaxshilangan, tezroq tajribasiga ega bo'ladi.

Bu sizning ilovangizni qurilma imkoniyatlari yoki tarmoq sifatidan qat'i nazar, kengroq global auditoriya uchun yanada barqaror va kirish mumkin qiladi.

TypeScript Bilan Tiplar Xavfsizligi

Katta miqyosdagi ilovalar uchun tiplar xavfsizligi juda muhimdir. Xatolarning oldini olish va dasturchi tajribasini yaxshilash uchun siz `useFormState` va o'z action'laringizga osongina TypeScript tiplarini qo'shishingiz mumkin.

            
import type { FC } from 'react';
import { useFormState } from 'react-dom';

// 1. State'ingiz shaklini aniqlang
type FormState = {
  message: string | null;
  errors?: {
    name?: string;
    email?: string;
  };
};

// 2. Server action'ni tiplar bilan aniqlang
async function typedAction(prevState: FormState, formData: FormData): Promise<FormState> {
  // ... action mantig'i ...
  // Qaytariladigan qiymat FormState tipiga mos kelishi kerak
  return { message: 'Muvaffaqiyatli!', errors: undefined };
}

const MyTypedForm: FC = () => {
  const initialState: FormState = { message: null, errors: {} };

  // 3. Hook tiplarni to'g'ri aniqlaydi
  const [state, formAction] = useFormState(typedAction, initialState);

  return (
    

      {/* state.errors.name endi avtomatik to'ldirish va tip tekshiruviga ega bo'ladi */}
    
  );
};

            

              
                Copy
              
            
          

Muvaffaqiyatdan So'ng Formani Tozalash

Keng tarqalgan talablardan biri muvaffaqiyatli yuborishdan so'ng forma maydonlarini tozalashdir. `useFormState` faqat *natija* holatini boshqargani uchun, u kiritish elementlarini o'zini nazorat qilmaydi. Standart HTML xulq-atvori brauzerlarning yuborishdan keyin kiritish qiymatlarini saqlab qolishidir.

Formani tozalash uchun siz `

            
// Komponentingiz ichida
const [formKey, setFormKey] = useState(0);
const [state, formAction] = useFormState(myAction, initialState);

useEffect(() => {
  if (state.status === 'success') {
    // Formani qayta yuklashga majburlash uchun key'ni oshiring
    setFormKey(prevKey => prevKey + 1);
  }
}, [state]);

return (
  
    {/* ... forma maydonlari ... */}
  
);

            

              
                Copy
              
            
          

Yana bir keng tarqalgan yondashuv forma elementida `useRef` ishlatish va muvaffaqiyatli holat o'zgarishida ishga tushadigan `useEffect` hook'i ichida `formRef.current.reset()`'ni chaqirishni o'z ichiga oladi.

`useFormState` va `useState`: Qaysi Birini Qachon Ishlatish Kerak?

`useFormState` `useState`'ning o'rnini bosmasligini tushunish muhim. Ular turli maqsadlarga xizmat qiladi va siz ularni ko'pincha birga ishlatasiz.

• `useState` umumiy maqsadli, mijoz tomonidagi holatni boshqarish uchun. Bunga UI elementlarini almashtirish (masalan, parol ko'rinishi belgisi), jonli mijoz tomonidagi validatsiya uchun kiritishlarni boshqarish (masalan, foydalanuvchi yozayotganda parol kuchini tekshirish) yoki to'g'ridan-to'g'ri server action natijasi bo'lmagan har qanday holatni boshqarish kiradi.
• `useFormState` maxsus forma yuborish amali natijasi bo'lgan holatni boshqarish uchun. Uning asosiy vazifasi o'sha amal natijasini UI'ga qaytarib aks ettirishdir.

Yaxshi qoida: Agar holat o'zgarishi formaning yuborilishi va action tomonidan qayta ishlanishi natijasi bo'lsa, `useFormState` to'g'ri vositadir. Formangizdagi barcha boshqa interaktiv UI holatlari uchun `useState` ehtimol yaxshiroq tanlovdir.

Xulosa: React Formalari Uchun Yangi Davr

`useFormState` hook'i, Server Actions bilan birgalikda, React'da formalarni boshqarishda muhim bir qadamni anglatadi. U mijoz va server o'rtasidagi aloqa jarayonini soddalashtiradi, shablon kodni kamaytiradi va qo'lda holat sinxronizatsiyasi bilan bog'liq bo'lgan butun bir sinf xatolarni yo'q qiladi.

Ushbu zamonaviy usulni o'zlashtirib, siz quyidagi xususiyatlarga ega ilovalar yaratishingiz mumkin:

• Yanada Samarali: Kamroq mijoz tomonidagi JavaScript tezroq yuklanish vaqtini va, ayniqsa, ko'plab xalqaro bozorlarda keng tarqalgan past darajali qurilmalar va sekin tarmoqlarda sezgirroq ishlashni anglatadi.
• Yanada Barqaror: Ichki o'rnatilgan progressiv yaxshilanish bilan sizning asosiy funksionalligingiz barcha foydalanuvchilar uchun ularning brauzer muhitidan qat'i nazar, ochiq qoladi.
• Qo'llab-quvvatlash Osonroq: Forma action'larini ularning tegishli UI'si bilan bir joyda joylashtirish yoki ularni markazlashtirilgan server fayllarida saqlash mantiqni soddalashtiradi va global taqsimlangan jamoalar uchun kod bazasini tushunishni osonlashtiradi.

React ekotizimi rivojlanishda davom etar ekan, `useFormState` veb-ilovalarning keyingi avlodini yaratish uchun asosiy vosita sifatida ajralib turadi. Uni o'zlashtirish orqali siz shunchaki yangi hook'ni o'rganmayapsiz; siz veb-dasturlashga yanada mustahkam, samarali va global miqyosda fikrlaydigan yondashuvni o'zlashtirmoqdasiz.