2-sentabr, 2025O'zbek

Forma holatini boshqarishni soddalashtirish uchun React'ning experimental_useFormStatus xukini o'rganing. Amaliy misollar orqali joriy etish va afzalliklarini o'rganing.

React experimental_useFormStatus'ni joriy etish: Forma holatini boshqarishni takomillashtirish

React'ning rivojlanayotgan landshafti dasturchi tajribasini va ilova unumdorligini yaxshilash uchun doimiy ravishda yangi vositalar va usullarni taqdim etadi. Shunday eksperimental xususiyatlardan biri bu experimental_useFormStatus xuki bo'lib, u forma holatini boshqarishni, ayniqsa server harakatlari va progressiv takomillashtirish stsenariylarida soddalashtirish uchun mo'ljallangan. Ushbu keng qamrovli qo'llanma experimental_useFormStatus xukini batafsil o'rganib chiqadi va undan samarali foydalanish uchun amaliy misollar va tushunchalarni taqdim etadi.

`experimental_useFormStatus` nima?

experimental_useFormStatus xuki - bu React jamoasi tomonidan taqdim etilgan eksperimental API bo'lib, u formani yuborish holatini, ayniqsa server harakatlaridan foydalanganda, kuzatib borishning oddiyroq usulini ta'minlash uchun mo'ljallangan. Ushbu xukdan oldin, formaning turli holatlarini (bo'sh, yuborilmoqda, muvaffaqiyatli, xato) boshqarish ko'pincha murakkab holat boshqaruvi mantig'ini talab qilar edi. experimental_useFormStatus ushbu murakkablikning ko'p qismini abstraktlashtirishga qaratilgan bo'lib, forma yuborish holatlarini kuzatish va ularga reaksiya bildirishning oddiy va samarali usulini taqdim etadi.

Asosiy afzalliklari:

Soddalashtirilgan holat boshqaruvi: Forma yuborish holatlarini boshqarish uchun zarur bo'lgan shablon kodni kamaytiradi.
Yaxshilangan foydalanuvchi tajribasi: Formaning holatiga qarab UI yangilanishlarini yanada sezgir qilish imkonini beradi.
Kodning o'qilishi osonligi: Forma bilan bog'liq kodni tushunish va qo'llab-quvvatlashni osonlashtiradi.
Server harakatlari bilan uzluksiz integratsiya: Ayniqsa, React Server Komponentlari va server harakatlari bilan yaxshi ishlash uchun mo'ljallangan.

Asosiy joriy etish

experimental_useFormStatus'ning asosiy joriy etilishini ko'rsatish uchun, oddiy aloqa formasi misolini ko'rib chiqamiz. Ushbu forma foydalanuvchining ismini, elektron pochtasini va xabarini yig'adi va keyin uni server harakati yordamida yuboradi.

Dastlabki talablar

Kodga sho'ng'ishdan oldin, sizda quyidagilar bilan sozangan React loyihasi mavjudligiga ishonch hosil qiling:

Eksperimental API'larni qo'llab-quvvatlaydigan React versiyasi (kerakli versiya uchun React hujjatlarini tekshiring).
React Server Komponentlari yoqilgan (odatda Next.js yoki Remix kabi freymvorklarda ishlatiladi).

Misol: Oddiy aloqa formasi

Bu yerda oddiy aloqa formasi komponenti keltirilgan:

```jsx // app/actions.js (Server harakati) 'use server' export async function submitContactForm(formData) { // Ma'lumotlar bazasiga murojaat yoki API so'rovini simulyatsiya qilish 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: 'Barcha maydonlar toʻldirilishi shart.' }; } try { // Haqiqiy API chaqiruvi yoki ma'lumotlar bazasi amaliyoti bilan almashtiring console.log('Forma yuborildi:', { name, email, message }); return { success: true, message: 'Forma muvaffaqiyatli yuborildi!' }; } catch (error) { console.error('Formani yuborishda xatolik:', error); return { success: false, message: 'Formani yuborishda xatolik yuz berdi.' }; } } // app/components/ContactForm.jsx (Mijoz komponenti) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Ism:

Email:

Xabar:

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

<h3>Tushuntirish</h3>

<ul>
  <li><b>Server harakati (<code>app/actions.js</code>):</b> Ushbu fayl server harakati bo'lgan <code>submitContactForm</code> funksiyasini belgilaydi. U forma yuborishning asinxron tabiatini namoyish qilish uchun 2 soniyalik kechikish bilan API so'rovini simulyatsiya qiladi. Shuningdek, u asosiy validatsiya va xatolarni qayta ishlashni boshqaradi.</li>
  <li><b>Mijoz komponenti (<code>app/components/ContactForm.jsx</code>):</b> Ushbu fayl mijoz komponenti bo'lgan <code>ContactForm</code> komponentini belgilaydi. U <code>experimental_useFormStatus</code> xukini va <code>submitContactForm</code> harakatini import qiladi.</li>
  <li><b><code>useFormStatus</code>'dan foydalanish:</b> <code>SubmitButton</code> komponenti ichida <code>useFormStatus</code> chaqiriladi. Ushbu xuk formaning yuborilish holati haqida ma'lumot beradi.</li>
  <li><b><code>pending</code> xususiyati:</b> <code>useFormStatus</code> tomonidan qaytarilgan <code>pending</code> xususiyati formaning hozirda yuborilayotganligini bildiradi. U yuborish tugmasini o'chirib qo'yish va "Yuborilmoqda..." xabarini ko'rsatish uchun ishlatiladi.</li>
  <li><b>Formani bog'lash:</b> <code>form</code> elementining <code>action</code> prop'i <code>submitContactForm</code> server harakatiga bog'langan. Bu React'ga forma yuborilganda server harakatini chaqirishni aytadi.</li>
</ul>

<h2>Ilg'or foydalanish va e'tiborga olinadigan jihatlar</h2>

<h3>Muvaffaqiyat va xato holatlarini qayta ishlash</h3>

<p><code>experimental_useFormStatus</code> yuborish holatini kuzatishni soddalashtirsa-da, siz ko'pincha muvaffaqiyat va xato holatlarini aniq qayta ishlashingiz kerak bo'ladi. Server harakatlari muvaffaqiyat yoki muvaffaqiyatsizlikni ko'rsatuvchi ma'lumotlarni qaytarishi mumkin, keyin siz ulardan UI'ni mos ravishda yangilash uchun foydalanishingiz mumkin.</p>

<p><b>Misol:</b></p>

```jsx
// app/components/ContactForm.jsx (O'zgartirilgan)
'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 ? 'Yuborilmoqda...' : 'Yuborish'}
    </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">Ism:</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">Xabar:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Tushuntirish:</b></p>

<ul>
  <li><b>Xabarlar uchun holat:</b> Server harakati tomonidan qaytarilgan natijani saqlash uchun <code>message</code> holat o'zgaruvchisi kiritilgan.</li>
  <li><b>Natijani qayta ishlash:</b> Forma yuborilgandan so'ng, <code>handleSubmit</code> funksiyasi <code>message</code> holatini server harakatidan olingan natija bilan yangilaydi.</li>
  <li><b>Xabarlarni ko'rsatish:</b> Komponent natijaning <code>success</code> xususiyatiga qarab xabarni ko'rsatadi va muvaffaqiyat va xato holatlari uchun turli CSS sinflarini qo'llaydi.</li>
</ul>

<h3>Progressiv takomillashtirish</h3>

<p><code>experimental_useFormStatus</code> progressiv takomillashtirish stsenariylarida o'zini yaxshi ko'rsatadi. Standart HTML formasini React bilan bosqichma-bosqich takomillashtirib, siz JavaScript ishlamay qolganda asosiy funksionallikni yo'qotmasdan yaxshiroq foydalanuvchi tajribasini taqdim etishingiz mumkin.</p>

<p><b>Misol:</b></p>

<p>Oddiy HTML formadan boshlab:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Ism:</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">Xabar:</label>
    <textarea id="message" name="message" required>

```

Keyin siz uni React va experimental_useFormStatus yordamida bosqichma-bosqich takomillashtirishingiz mumkin.

```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); // Agar unga tayanilmasa, boshlang'ich holat sifatida null dan foydalaning return (

Ism:

Email:

Xabar:

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

<p><b>Tushuntirish:</b></p>

<ul>
  <li><b>Boshlang'ich HTML formasi:</b> <code>public/contact.html</code> faylida JavaScriptsiz ham ishlaydigan standart HTML forma mavjud.</li>
  <li><b>Progressiv takomillashtirish:</b> <code>EnhancedContactForm</code> komponenti HTML formasini bosqichma-bosqich takomillashtiradi. Agar JavaScript yoqilgan bo'lsa, React nazoratni o'z qo'liga oladi va boyroq foydalanuvchi tajribasini taqdim etadi.</li>
  <li><b><code>useFormState</code> xuki:</b> Forma holatini boshqarish va server harakatini formaga bog'lash uchun <code>useFormState</code>'dan foydalaniladi.</li>
	<li> <b><code>state</code>:</b> <code>useFormState</code>'dan olingan <code>state</code> endi server harakatidan qaytgan qiymatni saqlaydi, uni muvaffaqiyat yoki xato xabarlari uchun tekshirish mumkin.</li>
</ul>

<h3>Xalqaro masalalar</h3>

<p>Global auditoriya uchun formalar yaratishda bir nechta xalqaro masalalarni hisobga olish kerak:</p>

<ul>
  <li><b>Mahalliylashtirish:</b> Formangizning yorliqlari, xabarlari va xato xabarlari turli tillarga mahalliylashtirilganligiga ishonch hosil qiling. i18next kabi vositalar tarjimalarni boshqarishga yordam beradi.</li>
  <li><b>Sana va raqam formatlari:</b> Sana va raqam formatlarini foydalanuvchining lokaliga mos ravishda qayta ishlang. Sanalar va raqamlarni to'g'ri formatlash uchun <code>Intl</code> yoki <code>moment.js</code> (sana formatlash uchun, garchi u hozir eskirgan hisoblansa ham) kabi kutubxonalardan foydalaning.</li>
  <li><b>Manzil formatlari:</b> Turli mamlakatlarda turli xil manzil formatlari mavjud. Ko'p manzil formatlarini qo'llab-quvvatlaydigan kutubxonadan foydalanishni yoki foydalanuvchining joylashuviga qarab maxsus forma maydonlarini yaratishni ko'rib chiqing.</li>
  <li><b>Telefon raqamini tekshirish:</b> Telefon raqamlarini xalqaro standartlarga muvofiq tekshiring. <code>libphonenumber-js</code> kabi kutubxonalar bu borada yordam berishi mumkin.</li>
  <li><b>O'ngdan-chapga (RTL) qo'llab-quvvatlash:</b> Formangizning joylashuvi Arab yoki Ibroniy kabi RTL tillarni qo'llab-quvvatlashiga ishonch hosil qiling. Yaxshiroq RTL qo'llab-quvvatlashi uchun CSS mantiqiy xususiyatlaridan (masalan, <code>margin-left</code> o'rniga <code>margin-inline-start</code>) foydalaning.</li>
  <li><b>Maxsus imkoniyatlar (Accessibility):</b> Joylashuvidan qat'i nazar, nogironligi bo'lgan odamlar uchun formalaringiz foydalanishga yaroqli bo'lishini ta'minlash uchun maxsus imkoniyatlar bo'yicha ko'rsatmalarga (WCAG) rioya qiling.</li>
</ul>

<p><b>Misol: Mahalliylashtirilgan forma yorliqlari</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>
  );
}
```

<p><b>Tushuntirish:</b></p>

<ul>
  <li><b>Tarjima fayllari:</b> Misolda tarjimalarni boshqarish uchun <code>react-i18next</code> ishlatilgan. Alohida JSON fayllar turli tillar uchun tarjimalarni o'z ichiga oladi.</li>
  <li><b><code>useTranslation</code> xuki:</b> <code>useTranslation</code> xuki tarjima funksiyasiga (<code>t</code>) kirishni ta'minlaydi, u mahalliylashtirilgan satrlarni olish uchun ishlatiladi.</li>
  <li><b>Mahalliylashtirilgan yorliqlar:</b> Forma yorliqlari va tugma matni <code>t</code> funksiyasi yordamida olinadi, bu ularning foydalanuvchi afzal ko'rgan tilda ko'rsatilishini ta'minlaydi.</li>
</ul>

<h3>Maxsus imkoniyatlar (Accessibility) bo'yicha mulohazalar</h3>

<p>Formalaringizning barcha foydalanuvchilar, shu jumladan nogironligi bo'lganlar uchun ham qulay bo'lishini ta'minlash juda muhim. Bu yerda ba'zi asosiy maxsus imkoniyatlar bo'yicha mulohazalar keltirilgan:</p>

<ul>
  <li><b>Semantik HTML:</b> <code><label></code>, <code><input></code>, <code><textarea></code> va <code><button></code> kabi semantik HTML elementlaridan to'g'ri foydalaning.</li>
  <li><b>Yorliqlar:</b> Yorliqlarni <code><label></code> dagi <code>for</code> atributi va forma boshqaruvidagi <code>id</code> atributi yordamida forma boshqaruvlari bilan bog'lang.</li>
  <li><b>ARIA atributlari:</b> Yordamchi texnologiyalarga qo'shimcha ma'lumot berish uchun ARIA atributlaridan foydalaning. Masalan, forma boshqaruvini tavsifga bog'lash uchun <code>aria-describedby</code> dan foydalaning.</li>
  <li><b>Xatolarni qayta ishlash:</b> Xatolarni aniq ko'rsating va foydali xato xabarlarini taqdim eting. Noto'g'ri forma boshqaruvlarini ko'rsatish uchun <code>aria-invalid</code> kabi ARIA atributlaridan foydalaning.</li>
  <li><b>Klaviatura navigatsiyasi:</b> Foydalanuvchilar formani klaviatura yordamida kezishi mumkinligiga ishonch hosil qiling. Agar kerak bo'lsa, fokus tartibini boshqarish uchun <code>tabindex</code> atributidan foydalaning.</li>
  <li><b>Rang kontrasti:</b> Matn va fon ranglari o'rtasida yetarli rang kontrastini ta'minlang.</li>
  <li><b>Forma tuzilishi:</b> Aniq va izchil forma tuzilishidan foydalaning. Bog'liq forma boshqaruvlarini <code><fieldset></code> va <code><legend></code> elementlari yordamida guruhlang.</li>
</ul>

<p><b>Misol: Qulay xatolarni qayta ishlash</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 ? 'Yuborilmoqda...' : 'Yuborish'}
    </button>
  )
}

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

async function handleSubmit(formData) {
    // Mijoz tomonida asosiy validatsiya
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Ism kiritilishi shart.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email kiritilishi shart.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Xabar kiritilishi shart.';
    }

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

setErrors({}); // Oldingi xatolarni tozalash
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Ism:</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">Xabar:</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>
  );
}
```

<p><b>Tushuntirish:</b></p>

<ul>
  <li><b>Xato holati:</b> Komponent validatsiya xatolarini kuzatish uchun <code>errors</code> holatini saqlaydi.</li>
  <li><b>Mijoz tomonidagi validatsiya:</b> <code>handleSubmit</code> funksiyasi formani yuborishdan oldin asosiy mijoz tomonidagi validatsiyani amalga oshiradi.</li>
  <li><b>ARIA atributlari:</b> Muayyan forma boshqaruvi uchun xato mavjud bo'lsa, <code>aria-invalid</code> atributi <code>true</code> ga o'rnatiladi. <code>aria-describedby</code> atributi forma boshqaruvini xato xabariga bog'laydi.</li>
  <li><b>Xato xabarlari:</b> Xato xabarlari tegishli forma boshqaruvlari yonida ko'rsatiladi.</li>
</ul>

<h2>Potentsial qiyinchiliklar va cheklovlar</h2>

<ul>
  <li><b>Eksperimental holat:</b> Eksperimental API bo'lganligi sababli, <code>experimental_useFormStatus</code> kelajakdagi React versiyalarida o'zgarishi yoki olib tashlanishi mumkin. React hujjatlari bilan doimo xabardor bo'lish va kerak bo'lganda kodingizni moslashtirishga tayyor bo'lish muhim.</li>
  <li><b>Cheklangan doira:</b> Xuk asosan yuborish holatini kuzatishga qaratilgan va validatsiya yoki ma'lumotlarni qayta ishlash kabi keng qamrovli forma boshqaruvi xususiyatlarini ta'minlamaydi. Ushbu jihatlar uchun siz hali ham qo'shimcha mantiqni amalga oshirishingiz kerak bo'lishi mumkin.</li>
  <li><b>Server harakatiga bog'liqlik:</b> Xuk server harakatlari bilan ishlash uchun mo'ljallangan, bu barcha holatlar uchun mos kelmasligi mumkin. Agar siz server harakatlaridan foydalanmayotgan bo'lsangiz, forma holatini boshqarish uchun alternativ yechimlarni topishingiz kerak bo'lishi mumkin.</li>
</ul>

<h2>Xulosa</h2>

<p><code>experimental_useFormStatus</code> xuki React'da forma yuborish holatlarini boshqarishda, ayniqsa server harakatlari va progressiv takomillashtirish bilan ishlashda sezilarli yaxshilanishni taklif etadi. Holat boshqaruvini soddalashtirib va aniq hamda ixcham API taqdim etib, u ham dasturchi tajribasini, ham foydalanuvchi tajribasini yaxshilaydi. Biroq, uning eksperimental tabiatini hisobga olgan holda, kelajakdagi React versiyalaridagi yangilanishlar va potentsial o'zgarishlar haqida xabardor bo'lish juda muhim. Uning afzalliklari, cheklovlari va eng yaxshi amaliyotlarini tushunib, siz React ilovalaringizda yanada mustahkam va foydalanuvchiga qulay formalar yaratish uchun <code>experimental_useFormStatus</code>'dan samarali foydalanishingiz mumkin. Global auditoriya uchun inklyuziv formalar yaratish uchun xalqarolashtirish va maxsus imkoniyatlar bo'yicha eng yaxshi amaliyotlarni hisobga olishni unutmang.</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">useFormStatus</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">forma 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">React formalari</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 xuklari</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">formani yuborish</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">asinxron formalar</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">progressiv takomillashtirish</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="React experimental_useFormStatus'ni joriy etish: Forma holatini boshqarishni takomillashtirish"/><meta property="og:description" content="Forma holatini boshqarishni soddalashtirish uchun React'ning experimental_useFormStatus xukini o'rganing. Amaliy misollar orqali joriy etish va afzalliklarini o'rganing."/><meta property="og:url" content="https://mlog.uz/uz/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="uz"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:51.864Z"/><meta property="article:modified_time" content="2025-09-02T08:47:51.864Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React"/><meta property="article:tag" content="useFormStatus"/><meta property="article:tag" content="forma holati"/><meta property="article:tag" content="React formalari"/><meta property="article:tag" content="eksperimental API"/><meta property="article:tag" content="React xuklari"/><meta property="article:tag" content="formani yuborish"/><meta property="article:tag" content="asinxron formalar"/><meta property="article:tag" content="progressiv takomillashtirish"/><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="React experimental_useFormStatus'ni joriy etish: Forma holatini boshqarishni takomillashtirish"/><meta name="twitter:description" content="Forma holatini boshqarishni soddalashtirish uchun React'ning experimental_useFormStatus xukini o'rganing. Amaliy misollar orqali joriy etish va afzalliklarini o'rganing."/><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>

React experimental_useFormStatus'ni joriy etish: Forma holatini boshqarishni takomillashtirish

experimental_useFormStatus nima?

Asosiy joriy etish

Dastlabki talablar

Misol: Oddiy aloqa formasi

`experimental_useFormStatus` nima?