React experimental_useFormState: Kengaytirilgan shakllarni boshqarish bo'yicha keng qamrovli qo'llanma

React-ning doimiy rivojlanib borayotgan ekotizimi doimiy ravishda ishlab chiquvchi tajribasini va ilovalarning ishlashini yaxshilash uchun innovatsion vositalarni taqdim etadi. Shunday yutuqlardan biri bu experimental_useFormState Hookidir. Hozirgi vaqtda eksperimental bosqichda bo'lgan ushbu ilgak, shakl holatini boshqarish va asenkron harakatlarni, ayniqsa React Server Komponentlari va Harakatlari bilan birlashtirilganda boshqarishning kuchli va soddalashtirilgan yondashuvini taqdim etadi. Ushbu qo'llanma experimental_useFormState ning murakkabligini chuqurroq o'rganadi, uning afzalliklari, foydalanish holatlari va amalga oshirish strategiyalarini o'rganadi.

experimental_useFormState nima?

experimental_useFormState Hook React ilovalarida shakllarni boshqarishni soddalashtirish uchun mo'ljallangan. U shakl holati, xatolari va asenkron yuborishlarni boshqarishning deklarativ usulini taklif qiladi. Ko'pincha qo'lda holat yangilanishlari va murakkab hodisalarni boshqarishni o'z ichiga olgan an'anaviy usullardan farqli o'laroq, experimental_useFormState butun shakl hayotini boshqarish uchun bitta ilgakni taqdim etish orqali ushbu jarayonni soddalashtiradi.

Aslida, experimental_useFormState sizga holat qiymatini shakl topshirish mantig'ini bajaradigan funksiya bilan bog'lashga imkon beradi. Ushbu funksiya, odatda React Server Komponentlari kontekstidagi server harakati, ma'lumotlarni tekshirish va kerakli o'zgarishlarni amalga oshirish uchun javobgardir. Keyin ilgak ushbu funktsiyaning bajarilish holatini boshqaradi, foydalanuvchiga shaklning holati haqida fikr-mulohaza beradi (masalan, yuklanish, muvaffaqiyat, xato).

experimental_useFormState dan foydalanishning afzalliklari

• Soddalashtirilgan shakl mantig'i: Yagona ilgak ichida shakl holatini boshqarishni markazlashtirish orqali shablon kodini kamaytiradi.
• Ishlashni yaxshilandi: Keraksiz yangilanishlarni kamaytirish va server tomonidagi ma'lumotlar o'zgarishlaridan foydalanish orqali renderingni optimallashtiradi.
• Deklarativ yondashuv: Deklarativ dasturlash uslubi orqali yanada o'qiladigan va saqlanadigan kod bazasini targ'ib qiladi.
• Server harakatlari bilan uzluksiz integratsiya: React Server Komponentlari va Harakatlari bilan uzluksiz ishlash uchun mo'ljallangan, samarali ma'lumotlarni olish va o'zgarishlarni yoqadi.
• Foydalanuvchi tajribasini yaxshilandi: Foydalanuvchiga shaklning holati bo'yicha aniq va qisqa ma'lumotlarni taqdim etadi, umumiy foydalanuvchi tajribasini yaxshilaydi.

experimental_useFormState uchun foydalanish holatlari

experimental_useFormState Hook, ayniqsa server tomonidagi tekshiruv va ma'lumotlar o'zgarishlarini talab qiladigan murakkab shakllarga tegishli. Mana ba'zi umumiy foydalanish holatlari:

• Autentifikatsiya shakllari: Foydalanuvchilarni ro'yxatga olish, tizimga kirish va parolni tiklash shakllarini boshqarish.
• E-tijorat shakllari: Chiqish shakllarini qayta ishlash, foydalanuvchi profillarini yangilash va mahsulot ro'yxatlarini boshqarish.
• Kontentni boshqarish tizimlari (CMS): Maqolalar yaratish va tahrirlash, foydalanuvchi rollarini boshqarish va veb-sayt sozlamalarini sozlash.
• Ijtimoiy media platformalari: Yangilanishlarni joylashtirish, sharhlarni yuborish va foydalanuvchi profillarini boshqarish.
• Ma'lumotlarni kiritish shakllari: So'rovnomalar, fikr-mulohazalar shakllari va mijoz ma'lumotlari kabi turli manbalardan ma'lumotlarni olish va tekshirish.

Misolni amalga oshirish: Oddiy aloqa shakli

Keling, experimental_useFormState dan foydalanishni amaliy misol bilan ko'rsatamiz: oddiy aloqa shakli. Ushbu shakl foydalanuvchining ismi, elektron pochtasi va xabarini to'playdi, so'ngra ma'lumotlarni qayta ishlash uchun server harakatiga topshiradi.

1. Server harakatini aniqlash

Avval, biz shaklni yuborishni boshqaradigan server harakatini aniqlashimiz kerak. Ushbu harakat ma'lumotlarni tekshiradi va elektron pochta bildirishnomasini yuboradi.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Misol uchun elektron pochta yuborish funksiyasi export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Asosiy tekshirish if (!name || !email || !message) { return 'Iltimos, barcha maydonlarni to'ldiring.'; } try { await sendEmail({ to: 'admin@example.com', // Admin elektron pochtangiz bilan almashtiring subject: 'Yangi aloqa shakli topshirig'i', text: `Ism: ${name}\nEmail: ${email}\nXabar: ${message}`, }); revalidatePath('/'); // Bosh sahifani yoki tegishli yo'lni qayta tasdiqlang return 'Xabaringiz uchun rahmat!'; } catch (error) { console.error('Elektron pochta yuborishda xatolik:', error); return 'Xatolik yuz berdi. Iltimos, keyinroq qayta urinib ko'ring.'; } } ```

Tushuntirish:

• 'use server' direktivasi ushbu funksiya serverda bajarilishi kerakligini ko'rsatadi.
• Funksiya oldingi holatni (prevState) va shakl ma'lumotlarini (formData) argumentlar sifatida qabul qiladi.
• U shakl ma'lumotlaridan ismni, elektron pochtani va xabarni oladi.
• U barcha kerakli maydonlarning to'ldirilganligini ta'minlash uchun asosiy tekshiruvni amalga oshiradi.
• U elektron pochta bildirishnomasini yuborish uchun asenkron funksiya sendEmail dan foydalanadi (uni alohida amalga oshirishingiz kerak). Buni SendGrid, Mailgun yoki AWS SES kabi xizmat yordamida amalga oshirish mumkin.
• revalidatePath('/') Next.js ni bosh sahifa uchun ma'lumotlarni qayta olishga majbur qiladi va har qanday tegishli o'zgarishlar darhol aks ettirilishini ta'minlaydi.
• U shakl holatini yangilash uchun muvaffaqiyat yoki xato xabarini qaytaradi.

2. React komponentini amalga oshirish

Endi, shakl holatini boshqarish va yuborishni boshqarish uchun experimental_useFormState dan foydalanadigan React komponentini yarataylik.

```javascript 'use client'; import { experimental_useFormState as useFormState } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); return (

Ism:

Elektron pochta:

Xabar: </div> <button type="submit">Yuborish</button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p><b>Tushuntirish:</b></p> <ul> <li><code>'use client'</code> direktivasi ushbu komponent mijoz komponenti ekanligini ko'rsatadi.</li> <li>Biz qisqalik uchun <code>experimental_useFormState</code> ni <code>useFormState</code> sifatida va <code>submitContactForm</code> harakatini import qilamiz.</li> <li>Biz <code>useFormState</code> ni chaqiramiz, <code>submitContactForm</code> harakatini va boshlang'ich holatini <code>null</code> o'tkazamiz.</li> <li>Ilgak joriy holatni (<code>state</code>) va shaklni yuborishni tetiklantiradigan funksiyani (<code>formAction</code>) qaytaradi.</li> <li>Biz <code>formAction</code> funktsiyasini <code>form</code> elementining <code>action</code> propiga biriktiramiz. Bu React shaklni to'g'ri boshqarishi uchun juda muhimdir.</li> <li>Shakl ism, elektron pochta va xabar uchun kiritish maydonlarini, shuningdek, yuborish tugmasini o'z ichiga oladi.</li> <li><code>{state && <p>{state}</p>}</code> qatori foydalanuvchiga joriy holatni (muvaffaqiyat yoki xato xabarini) ko'rsatadi.</li> </ul> <h3>3. Elektron pochta yuborish xizmatini sozlash (sendEmail misoli)</h3> <p>Siz <code>sendEmail</code> funktsiyasini amalga oshirishingiz kerak. Gmail hisobi yordamida Nodemailer dan foydalanishning misoli: (Eslatma: Gmail-dan to'g'ridan-to'g'ri ishlab chiqarishda foydalanish odatda tavsiya etilmaydi. Ishlab chiqarish muhitlari uchun SendGrid, Mailgun yoki AWS SES kabi maxsus elektron pochta xizmatidan foydalaning.):</p> ```javascript // app/utils/email.js import nodemailer from 'nodemailer'; export async function sendEmail({ to, subject, text }) { // Gmail SMTP yordamida tashuvchi ob'ektini yarating const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: 'your_gmail_address@gmail.com', // Gmail manzilingiz bilan almashtiring pass: 'your_gmail_password', // Gmail parolingiz yoki Ilova Parolingiz bilan almashtiring }, }); // Elektron pochta parametrlari belgilang const mailOptions = { from: 'your_gmail_address@gmail.com', to: to, subject: subject, text: text, }; // Elektron pochtani yuborish try { await transporter.sendMail(mailOptions); console.log('Elektron pochta muvaffaqiyatli yuborildi'); } catch (error) { console.error('Elektron pochta yuborishda xatolik:', error); throw error; // Server harakatida ushbu xatoni ushlash uchun xatoni qayta chiqarish } } ``` <p><b>Muhim xavfsizlik eslatmasi:</b> Haqiqiy Gmail parolingizni hech qachon kod bazangizga to'g'ridan-to'g'ri qo'ymang! Maxfiy ma'lumotlarni saqlash uchun muhit o'zgaruvchilaridan foydalaning. Ishlab chiqarishda foydalanish uchun Nodemailer uchun maxsus Ilova Parolini yarating va asosiy Gmail parolingizdan foydalanishdan saqlaning. Maxsus elektron pochta yuborish xizmatlari Gmail-dan to'g'ridan-to'g'ri foydalanishga nisbatan yaxshiroq yetkazib berish va xavfsizlikni taklif etadi.</p> <h3>4. Misolni ishga tushirish</h3> <p>Kerakli qaramliklar o'rnatilganligiga ishonch hosil qiling:</p> ```bash npm install nodemailer ``` yoki ```bash yarn add nodemailer ``` <p>Keyin, Next.js ishlab chiqish serveringizni ishga tushiring:</p> ```bash npm run dev ``` yoki ```bash yarn dev ``` <p>Brauzeringizni oching va <code>ContactForm</code> komponentini o'z ichiga olgan sahifaga o'ting. Shaklni to'ldiring va uni topshiring. Siz shakl ostida muvaffaqiyat xabarini yoki xato xabarini ko'rishingiz kerak. Elektron pochta qutingizni elektron pochta muvaffaqiyatli yuborilganligini tekshirish uchun tekshiring.</p> <h2>Kengaytirilgan foydalanish va e'tiborga olish kerak bo'lgan jihatlar</h2> <h3>1. Yuklash holatlarini boshqarish</h3> <p>Yaxshiroq foydalanuvchi tajribasini taqdim etish uchun shakl yuborilayotganini ko'rsatish muhimdir. <code>experimental_useFormState</code> yuklash holatini bevosita ochib bermasa-da, siz React-ning <code>useTransition</code> ilgagi yordamida buni qo'lda <code>formAction</code> bilan birgalikda boshqarishingiz mumkin.</p> ```javascript 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">Ism:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">Elektron pochta:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Xabar:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Yuborish...' : 'Yuborish'} </button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` Bu misolda: <ul> <li>Biz 'react' dan <code>useTransition</code> ni import qilamiz.</li> <li>Biz <code>useTransition</code> ni chaqirib, <code>isPending</code> holatini va <code>startTransition</code> funksiyasini olamiz.</li> <li>Biz <code>formAction</code> ga qo'ng'iroqni <code>startTransition</code> ichiga o'raymiz. Bu React-ga shaklni topshirishni o'tish sifatida ko'rib chiqishini aytadi, agar kerak bo'lsa, uni uzib qo'yishga imkon beradi.</li> <li>Biz yuborish tugmasini <code>isPending</code> haqiqiy bo'lganda o'chirib qo'yamiz va tugma matnini "Yuborish..." ga o'zgartiramiz.</li> </ul> <h3>2. Xatolarni boshqarish va tekshirish</h3> Yaxshi foydalanuvchi tajribasini ta'minlash uchun mustahkam xatolarni boshqarish juda muhimdir. Server harakati har tomonlama tekshiruvni amalga oshirishi va mijozga ma'lumotli xato xabarlarini qaytarishi kerak. Mijoz komponenti keyin bu xabarlarni foydalanuvchiga ko'rsatishi mumkin. <p><b>Server tomonidagi tekshirish:</b> Zararli kiritishlarning oldini olish va ma'lumotlarning yaxlitligini ta'minlash uchun har doim ma'lumotlarni serverda tekshiring. Sxemani tekshirish uchun Zod yoki Yup kabi kutubxonalardan foydalaning.</p> <p><b>Mijoz tomonidagi tekshirish (ixtiyoriy):</b> Server tomonidagi tekshirish muhim bo'lsa-da, mijoz tomonidagi tekshirish foydalanuvchiga darhol fikr-mulohaza berishi va foydalanuvchi tajribasini yaxshilashi mumkin. Biroq, mijoz tomonidagi tekshirish hech qachon haqiqatning yagona manbai sifatida ishonmaslik kerak.</p> <h3>3. Optimistik yangilanishlar</h3> <p>Optimistik yangilanishlar shaklni topshirish muvaffaqiyatli bo'lgandek UI ni darhol yangilab, ilovangizni yanada javobgar his qilishi mumkin, hatto server buni tasdiqlamasdan ham. Biroq, xatolarni boshqarishga va topshirish muvaffaqiyatsiz bo'lsa, o'zgarishlarni qaytarishga tayyor bo'ling.</p> <p><code>experimental_useFormState</code> bilan siz <code>formAction</code> ni chaqirishdan oldin shakl ma'lumotlari asosida mahalliy holatni yangilab, optimistik yangilanishlarni amalga oshirishingiz mumkin. Agar server harakati muvaffaqiyatsiz bo'lsa, siz ilgak qaytargan xabar xatosi asosida o'zgarishlarni qaytarishingiz mumkin.</p> <h3>4. Qayta tekshirish va keshni saqlash</h3> <p>React Server Komponentlari va Harakatlari ishlashni yaxshilash uchun keshni saqlashdan foydalanadi. Shaklni yuborish ma'lumotlarni o'zgartirganda, UI ning so'nggi o'zgarishlarni aks ettirishini ta'minlash uchun keshni qayta tekshirish muhimdir.</p> <p><code>next/cache</code> dan <code>revalidatePath</code> va <code>revalidateTag</code> funktsiyalari keshning ma'lum qismlarini noto'g'ri qilish uchun ishlatilishi mumkin. <code>submitContactForm</code> misolida, muvaffaqiyatli shaklni yuborishdan so'ng bosh sahifani qayta tasdiqlash uchun <code>revalidatePath('/')</code> ishlatiladi.</p> <h3>5. Xalqarolashtirish (i18n)</h3> <p>Global auditoriya uchun ilovalarni yaratishda xalqarolashtirish (i18n) juda muhimdir. Bunga ilovangizni turli tillarga, mintaqalarga va madaniy afzalliklarga moslashtirish kiradi.</p> <p>Shakllar uchun bu lokalizatsiyalashgan yorliqlar, xabar xatolari va tekshirish qoidalarini taqdim etishni anglatadi. Tarjimalarni boshqarish va foydalanuvchining mintaqasiga muvofiq ma'lumotlarni formatlash uchun <code>next-intl</code> yoki <code>react-i18next</code> kabi i18n kutubxonalaridan foydalaning.</p> <p><code>next-intl</code> yordamida misol:</p> ```javascript // i18n.js (misol) import { createTranslator } from 'next-intl'; const messages = { en: { ContactForm: { NameLabel: 'Name', EmailLabel: 'Email', MessageLabel: 'Message', SubmitButton: 'Submit', SuccessMessage: 'Thank you for your message!', ErrorMessage: 'An error occurred. Please try again later.', NameRequired: 'Name is required', EmailRequired: 'Email is required', MessageRequired: 'Message is required', }, }, es: { ContactForm: { NameLabel: 'Nombre', EmailLabel: 'Correo electrónico', MessageLabel: 'Mensaje', SubmitButton: 'Enviar', SuccessMessage: '¡Gracias por tu mensaje!', ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.', NameRequired: 'El nombre es obligatorio', EmailRequired: 'El correo electrónico es obligatorio', MessageRequired: 'El mensaje es obligatorio', }, }, // Qo'shimcha tillarni kerak bo'lganda qo'shing }; export async function getTranslations(locale) { return createTranslator({ locale, messages }); } ``` ```javascript // ContactForm.js 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; import { useLocale, useTranslations } from 'next-intl'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const t = useTranslations('ContactForm'); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">{t('NameLabel')}:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">{t('EmailLabel')}:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">{t('MessageLabel')}:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Yuborish...' : t('SubmitButton')} </button> {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>} </form> ); } export default ContactForm; ``` <h3>6. Kirish (a11y)</h3> <p>Iloyangizni nogironligi bo'lgan odamlar, shu jumladan, hamma uchun ishlatish uchun kirish muhimdir. Shakllarni yaratishda quyidagi kirish ko'rsatmalarini ko'rib chiqing:</p> <ul> <li><b>Semantik HTML dan foydalaning:</b> Shaklingizga tuzilish va ma'no berish uchun mos HTML elementlaridan, masalan <code><label></code>, <code><input></code> va <code><textarea></code> dan foydalaning.</li> <li><b>Barcha shakl maydonlari uchun yorliqlarni taqdim eting:</b> <code><label></code> elementida <code>for</code> atributini va shakl maydonida <code>id</code> atributini ishlatib, yorliqlarni shakl maydonlari bilan bog'lang.</li> <li><b>ARIA atributlaridan foydalaning:</b> Yordamchi texnologiyalarga shaklning tuzilishi va xatti-harakatlari haqida qo'shimcha ma'lumot berish uchun ARIA atributlaridan foydalaning.</li> <li><b>Rang kontrasti etarli bo'lishini ta'minlang:</b> Ko'rish qobiliyati buzilgan odamlar uchun o'qishni ta'minlash uchun matn va fon ranglari orasida etarli rang kontrastidan foydalaning.</li> <li><b>Klaviatura navigatsiyasini taqdim eting:</b> Foydalanuvchilarning faqat klaviaturadan foydalangan holda shaklda harakatlanishini ta'minlang.</li> <li><b>Yordamchi texnologiyalar bilan sinovdan o'tkazing:</b> Shaklingizni nogironligi bo'lgan odamlar uchun ochiqligini ta'minlash uchun ekranni o'qish moslamalari kabi yordamchi texnologiyalar bilan sinovdan o'tkazing.</li> </ul> <h2>Global masalalar va eng yaxshi amaliyotlar</h2> <h3>1. Vaqt zonasi</h3> <p>Shakllarda sanalar va vaqtlar bilan ishlashda vaqt zonalarni hisobga olish muhimdir. Serverda sanalar va vaqtlarni UTC formatida saqlang va ularni mijozda foydalanuvchining mahalliy vaqt zonasiga aylantiring.</p> <h3>2. Valyutalar</h3> <p>Shakllarda pul qiymatlari bilan ishlashda valyutalarni to'g'ri boshqarish muhimdir. Qiymatlarni foydalanuvchining mintaqasiga muvofiq formatlash va tegishli valyuta belgisini ko'rsatish uchun valyutani formatlash kutubxonasidan foydalaning.</p> <h3>3. Manzillar</h3> <p>Manzil formatlari turli mamlakatlarda sezilarli darajada farq qiladi. Foydalanuvchilarning manzillarini to'g'ri kiritishlarini ta'minlash uchun xalqaro manzil formatlarini qo'llab-quvvatlaydigan kutubxonadan foydalaning.</p> <h3>4. Telefon raqamlari</h3> <p>Telefon raqami formatlari ham turli mamlakatlarda farq qiladi. Telefon raqamlarini foydalanuvchining mintaqasiga muvofiq formatlash va ularning haqiqiy telefon raqamlari ekanligini tekshirish uchun telefon raqamlarini formatlash kutubxonasidan foydalaning.</p> <h3>5. Ma'lumotlarning maxfiyligi va muvofiqligi</h3> <p>Shakl ma'lumotlarini to'plash va qayta ishlashda GDPR va CCPA kabi ma'lumotlar maxfiyligi qoidalariga e'tibor bering. Foydalanuvchilardan ma'lumotlarini to'plashdan oldin rozilik oling va ularga o'z ma'lumotlariga kirish, o'zgartirish va o'chirish imkoniyatini taqdim eting.</p> <h2>Xulosa</h2> <p><code>experimental_useFormState</code> Hook React ilovalarida shakllarni boshqarishni soddalashtirish uchun istiqbolli yondashuvni taklif etadi. Server harakatlaridan foydalanish va deklarativ uslubni qabul qilish orqali ishlab chiquvchilar yanada samarali, saqlanadigan va foydalanuvchilar uchun qulay shakllarni yaratishlari mumkin. Hozirgi vaqtda eksperimental bosqichda bo'lsa ham, <code>experimental_useFormState</code> shakl ish oqimlarini soddalashtirish va umumiy React ishlab chiqish tajribasini yaxshilash uchun katta salohiyatga ega. Ushbu qo'llanmada ko'rsatilgan eng yaxshi amaliyotlarga rioya qilish orqali siz ilovalaringiz uchun mustahkam va masshtablanadigan shakl echimlarini yaratish uchun <code>experimental_useFormState</code> ning kuchidan samarali foydalanishingiz mumkin.</p> <p>API eksperimentdan barqaror holatga o'tishi bilan har doim React-ning so'nggi hujjatlari va jamoat muhokamalarini kuzatib boring.</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">React</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">useFormState</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">shakllarni boshqarish</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">shakl holati</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">eksperimental 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">React shakllari</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">server harakatlari</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">React Hook</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">shaklni optimallashtirish</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">asenkron shakllar</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">ma'lumotlar o'zgarishlari</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">UI yangilanishlari</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 hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>