2 września 2025Polski

Odkryj eksperymentalny hook experimental_useFormStatus w React do usprawnionego zarządzania stanem formularza. Poznaj implementację, korzyści i zaawansowane użycie na przykładach.

Implementacja experimental_useFormStatus w React: Ulepszone zarządzanie stanem formularza

Ciągle ewoluujący świat Reacta wprowadza nowe narzędzia i techniki, aby poprawić doświadczenie deweloperów i wydajność aplikacji. Jedną z takich eksperymentalnych funkcji jest hook experimental_useFormStatus, zaprojektowany w celu uproszczenia zarządzania stanem formularza, szczególnie w przypadku akcji serwerowych i scenariuszy progressive enhancement. Ten kompleksowy przewodnik szczegółowo omówi hook experimental_useFormStatus, dostarczając praktycznych przykładów i wskazówek dotyczących jego efektywnego wykorzystania.

Czym jest `experimental_useFormStatus`?

Hook experimental_useFormStatus to eksperymentalne API wprowadzone przez zespół Reacta, aby zapewnić prostszy sposób śledzenia statusu przesyłania formularza, zwłaszcza przy użyciu akcji serwerowych. Przed pojawieniem się tego hooka, zarządzanie różnymi stanami formularza (bezczynny, przesyłanie, sukces, błąd) często wymagało złożonej logiki zarządzania stanem. experimental_useFormStatus ma na celu uproszczenie tej złożoności, zapewniając prosty i wydajny sposób monitorowania i reagowania na stany przesyłania formularza.

Kluczowe korzyści:

Uproszczone zarządzanie stanem: Redukuje ilość kodu szablonowego potrzebnego do zarządzania stanami przesyłania formularza.
Lepsze doświadczenie użytkownika: Umożliwia bardziej responsywne aktualizacje interfejsu użytkownika w oparciu o status formularza.
Poprawiona czytelność kodu: Sprawia, że kod związany z formularzami jest łatwiejszy do zrozumienia i utrzymania.
Bezproblemowa integracja z akcjami serwerowymi: Zaprojektowany do szczególnie dobrej współpracy z React Server Components i akcjami serwerowymi.

Podstawowa implementacja

Aby zilustrować podstawową implementację experimental_useFormStatus, rozważmy prosty przykład formularza kontaktowego. Ten formularz będzie zbierał imię, e-mail i wiadomość użytkownika, a następnie przesyłał je za pomocą akcji serwerowej.

Wymagania wstępne

Zanim zagłębimy się w kod, upewnij się, że masz skonfigurowany projekt React z następującymi elementami:

Wersja React, która obsługuje eksperymentalne API (sprawdź dokumentację Reacta w celu uzyskania wymaganej wersji).
Włączone React Server Components (zazwyczaj używane w frameworkach takich jak Next.js lub Remix).

Przykład: Prosty formularz kontaktowy

Oto podstawowy komponent formularza kontaktowego:

```jsx // app/actions.js (Akcja serwerowa) 'use server' export async function submitContactForm(formData) { // Symulacja wywołania bazy danych lub żądania API await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'All fields are required.' }; } try { // Zastąp rzeczywistym wywołaniem API lub operacją na bazie danych console.log('Form submitted:', { name, email, message }); return { success: true, message: 'Form submitted successfully!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'Failed to submit form.' }; } } // app/components/ContactForm.jsx (Komponent kliencki) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Imię:

Email:

Wiadomość:

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

<h3>Wyjaśnienie</h3>

<ul>
  <li><b>Akcja serwerowa (<code>app/actions.js</code>):</b> Ten plik definiuje funkcję <code>submitContactForm</code>, która jest akcją serwerową. Symuluje ona żądanie API z 2-sekundowym opóźnieniem, aby zademonstrować asynchroniczną naturę przesyłania formularza. Obsługuje również podstawową walidację i obsługę błędów.</li>
  <li><b>Komponent kliencki (<code>app/components/ContactForm.jsx</code>):</b> Ten plik definiuje komponent <code>ContactForm</code>, który jest komponentem klienckim. Importuje on hook <code>experimental_useFormStatus</code> i akcję <code>submitContactForm</code>.</li>
  <li><b>Użycie <code>useFormStatus</code>:</b> Wewnątrz komponentu <code>SubmitButton</code> wywoływany jest <code>useFormStatus</code>. Ten hook dostarcza informacji o statusie przesyłania formularza.</li>
  <li><b>Właściwość <code>pending</code>:</b> Właściwość <code>pending</code> zwracana przez <code>useFormStatus</code> wskazuje, czy formularz jest aktualnie przesyłany. Służy do wyłączania przycisku przesyłania i wyświetlania komunikatu "Przesyłanie...".</li>
  <li><b>Powiązanie formularza:</b> Właściwość <code>action</code> elementu <code>form</code> jest powiązana z akcją serwerową <code>submitContactForm</code>. Informuje to Reacta, aby wywołał akcję serwerową po przesłaniu formularza.</li>
</ul>

<h2>Zaawansowane użycie i uwagi</h2>

<h3>Obsługa stanów sukcesu i błędu</h3>

<p>Chociaż <code>experimental_useFormStatus</code> upraszcza śledzenie statusu przesyłania, często trzeba jawnie obsługiwać stany sukcesu i błędu. Akcje serwerowe mogą zwracać dane wskazujące na sukces lub porażkę, które można następnie wykorzystać do odpowiedniej aktualizacji interfejsu użytkownika.</p>

<p><b>Przykład:</b></p>

```jsx
// app/components/ContactForm.jsx (Zmodyfikowany)
'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 ? 'Przesyłanie...' : 'Prześlij'}
    </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">Imię:</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">Wiadomość:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Wyjaśnienie:</b></p>

<ul>
  <li><b>Stan dla komunikatów:</b> Wprowadzono zmienną stanu <code>message</code> do przechowywania wyniku zwróconego przez akcję serwerową.</li>
  <li><b>Obsługa wyniku:</b> Po przesłaniu formularza, funkcja <code>handleSubmit</code> aktualizuje stan <code>message</code> wynikiem z akcji serwerowej.</li>
  <li><b>Wyświetlanie komunikatów:</b> Komponent wyświetla komunikat w oparciu o właściwość <code>success</code> wyniku, stosując różne klasy CSS dla stanów sukcesu i błędu.</li>
</ul>

<h3>Progressive Enhancement</h3>

<p><code>experimental_useFormStatus</code> sprawdza się doskonale w scenariuszach progressive enhancement. Stopniowo ulepszając standardowy formularz HTML za pomocą Reacta, można zapewnić lepsze doświadczenie użytkownika bez poświęcania podstawowej funkcjonalności w przypadku awarii JavaScriptu.</p>

<p><b>Przykład:</b></p>

<p>Zaczynając od podstawowego formularza HTML:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Imię:</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">Wiadomość:</label>
    <textarea id="message" name="message" required>

```

Można go następnie stopniowo ulepszać za pomocą Reacta i experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Użyj null jako stanu początkowego, jeśli na nim nie polegasz return (

Imię:

Email:

Wiadomość:

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

<p><b>Wyjaśnienie:</b></p>

<ul>
  <li><b>Początkowy formularz HTML:</b> Plik <code>public/contact.html</code> zawiera standardowy formularz HTML, który będzie działał nawet bez JavaScriptu.</li>
  <li><b>Progressive Enhancement:</b> Komponent <code>EnhancedContactForm</code> stopniowo ulepsza formularz HTML. Jeśli JavaScript jest włączony, React przejmuje kontrolę i zapewnia bogatsze doświadczenie użytkownika.</li>
  <li><b>Hook <code>useFormState</code>:</b> Używa <code>useFormState</code> do zarządzania stanem formularza i powiązania akcji serwerowej z formularzem.</li>
	<li> <b><code>state</code>:</b> <code>state</code> z <code>useFormState</code> przechowuje teraz wartość zwrotną z akcji serwerowej, którą można sprawdzić pod kątem komunikatów o sukcesie lub błędzie.</li>
</ul>

<h3>Kwestie międzynarodowe</h3>

<p>Podczas implementacji formularzy dla globalnej publiczności, należy wziąć pod uwagę kilka kwestii międzynarodowych:</p>

<ul>
  <li><b>Lokalizacja:</b> Upewnij się, że etykiety formularzy, komunikaty i komunikaty o błędach są zlokalizowane na różne języki. Narzędzia takie jak i18next mogą pomóc w zarządzaniu tłumaczeniami.</li>
  <li><b>Formaty dat i liczb:</b> Obsługuj formaty dat i liczb zgodnie z lokalizacją użytkownika. Użyj bibliotek takich jak <code>Intl</code> lub <code>moment.js</code> (do formatowania dat, chociaż jest teraz uważany za przestarzały), aby poprawnie formatować daty i liczby.</li>
  <li><b>Formaty adresów:</b> Różne kraje mają różne formaty adresów. Rozważ użycie biblioteki obsługującej wiele formatów adresów lub tworzenie niestandardowych pól formularza w oparciu o lokalizację użytkownika.</li>
  <li><b>Walidacja numeru telefonu:</b> Waliduj numery telefonów zgodnie z międzynarodowymi standardami. Biblioteki takie jak <code>libphonenumber-js</code> mogą w tym pomóc.</li>
  <li><b>Wsparcie dla języków pisanych od prawej do lewej (RTL):</b> Upewnij się, że układ formularza obsługuje języki RTL, takie jak arabski czy hebrajski. Użyj logicznych właściwości CSS (np. <code>margin-inline-start</code> zamiast <code>margin-left</code>) dla lepszego wsparcia RTL.</li>
  <li><b>Dostępność:</b> Przestrzegaj wytycznych dotyczących dostępności (WCAG), aby upewnić się, że Twoje formularze są użyteczne dla osób z niepełnosprawnościami, niezależnie od ich lokalizacji.</li>
</ul>

<p><b>Przykład: Zlokalizowane etykiety formularza</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>Wyjaśnienie:</b></p>

<ul>
  <li><b>Pliki tłumaczeń:</b> Przykład używa <code>react-i18next</code> do zarządzania tłumaczeniami. Oddzielne pliki JSON zawierają tłumaczenia dla różnych języków.</li>
  <li><b>Hook <code>useTranslation</code>:</b> Hook <code>useTranslation</code> zapewnia dostęp do funkcji tłumaczącej (<code>t</code>), która jest używana do pobierania zlokalizowanych ciągów znaków.</li>
  <li><b>Zlokalizowane etykiety:</b> Etykiety formularza i tekst przycisku są pobierane za pomocą funkcji <code>t</code>, co zapewnia ich wyświetlanie w preferowanym języku użytkownika.</li>
</ul>

<h3>Kwestie dostępności</h3>

<p>Zapewnienie dostępności formularzy dla wszystkich użytkowników, w tym osób z niepełnosprawnościami, jest kluczowe. Oto kilka kluczowych kwestii dotyczących dostępności:</p>

<ul>
  <li><b>Semantyczny HTML:</b> Używaj poprawnie semantycznych elementów HTML, takich jak <code><label></code>, <code><input></code>, <code><textarea></code> i <code><button></code>.</li>
  <li><b>Etykiety:</b> Powiąż etykiety z kontrolkami formularza za pomocą atrybutu <code>for</code> w elemencie <code><label></code> i atrybutu <code>id</code> w kontrolce formularza.</li>
  <li><b>Atrybuty ARIA:</b> Używaj atrybutów ARIA, aby dostarczyć dodatkowych informacji technologiom wspomagającym. Na przykład, użyj <code>aria-describedby</code>, aby połączyć kontrolkę formularza z opisem.</li>
  <li><b>Obsługa błędów:</b> Wyraźnie wskazuj błędy i dostarczaj pomocnych komunikatów o błędach. Używaj atrybutów ARIA, takich jak <code>aria-invalid</code>, aby wskazać nieprawidłowe kontrolki formularza.</li>
  <li><b>Nawigacja za pomocą klawiatury:</b> Upewnij się, że użytkownicy mogą poruszać się po formularzu za pomocą klawiatury. W razie potrzeby użyj atrybutu <code>tabindex</code> do kontrolowania kolejności fokusu.</li>
  <li><b>Kontrast kolorów:</b> Zapewnij wystarczający kontrast kolorów między tekstem a tłem.</li>
  <li><b>Struktura formularza:</b> Używaj przejrzystej i spójnej struktury formularza. Grupuj powiązane kontrolki formularza za pomocą elementów <code><fieldset></code> i <code><legend></code>.</li>
</ul>

<p><b>Przykład: Dostępna obsługa błędów</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 ? 'Przesyłanie...' : 'Prześlij'}
    </button>
  )
}

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

async function handleSubmit(formData) {
    // Podstawowa walidacja po stronie klienta
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Imię jest wymagane.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email jest wymagany.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Wiadomość jest wymagana.';
    }

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

setErrors({}); // Wyczyść poprzednie błędy
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Imię:</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">Wiadomość:</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>Wyjaśnienie:</b></p>

<ul>
  <li><b>Stan błędów:</b> Komponent utrzymuje stan <code>errors</code> do śledzenia błędów walidacji.</li>
  <li><b>Walidacja po stronie klienta:</b> Funkcja <code>handleSubmit</code> wykonuje podstawową walidację po stronie klienta przed przesłaniem formularza.</li>
  <li><b>Atrybuty ARIA:</b> Atrybut <code>aria-invalid</code> jest ustawiany na <code>true</code>, jeśli występuje błąd dla określonej kontrolki formularza. Atrybut <code>aria-describedby</code> łączy kontrolkę formularza z komunikatem o błędzie.</li>
  <li><b>Komunikaty o błędach:</b> Komunikaty o błędach są wyświetlane obok odpowiednich kontrolek formularza.</li>
</ul>

<h2>Potencjalne wyzwania i ograniczenia</h2>

<ul>
  <li><b>Status eksperymentalny:</b> Będąc eksperymentalnym API, <code>experimental_useFormStatus</code> może ulec zmianie lub zostać usunięty w przyszłych wersjach Reacta. Ważne jest, aby być na bieżąco z dokumentacją Reacta i być gotowym na dostosowanie kodu w razie potrzeby.</li>
  <li><b>Ograniczony zakres:</b> Hook skupia się głównie na śledzeniu statusu przesyłania i nie zapewnia kompleksowych funkcji zarządzania formularzami, takich jak walidacja czy obsługa danych. Może być konieczne zaimplementowanie dodatkowej logiki dla tych aspektów.</li>
  <li><b>Zależność od akcji serwerowych:</b> Hook jest zaprojektowany do współpracy z akcjami serwerowymi, co może nie być odpowiednie dla wszystkich przypadków użycia. Jeśli nie używasz akcji serwerowych, może być konieczne znalezienie alternatywnych rozwiązań do zarządzania stanem formularza.</li>
</ul>

<h2>Podsumowanie</h2>

<p>Hook <code>experimental_useFormStatus</code> oferuje znaczną poprawę w zarządzaniu stanami przesyłania formularzy w React, szczególnie podczas pracy z akcjami serwerowymi i progressive enhancement. Upraszczając zarządzanie stanem i zapewniając przejrzyste i zwięzłe API, poprawia zarówno doświadczenie dewelopera, jak i użytkownika. Jednak biorąc pod uwagę jego eksperymentalny charakter, kluczowe jest, aby być na bieżąco z aktualizacjami i potencjalnymi zmianami w przyszłych wersjach Reacta. Rozumiejąc jego korzyści, ograniczenia i najlepsze praktyki, można skutecznie wykorzystać <code>experimental_useFormStatus</code> do budowania bardziej solidnych i przyjaznych dla użytkownika formularzy w aplikacjach React. Pamiętaj, aby uwzględnić najlepsze praktyki dotyczące internacjonalizacji i dostępności, aby tworzyć inkluzywne formularze dla globalnej publiczności.</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">stan formularza</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">formularze 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">eksperymentalne 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">hooki 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">przesyłanie formularza</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">formularze asynchroniczne</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">progressive enhancement</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="Implementacja experimental_useFormStatus w React: Ulepszone zarządzanie stanem formularza"/><meta property="og:description" content="Odkryj eksperymentalny hook experimental_useFormStatus w React do usprawnionego zarządzania stanem formularza. Poznaj implementację, korzyści i zaawansowane użycie na przykładach."/><meta property="og:url" content="https://mlog.uz/pl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="pl"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:51.793Z"/><meta property="article:modified_time" content="2025-09-02T08:47:51.793Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React"/><meta property="article:tag" content="useFormStatus"/><meta property="article:tag" content="stan formularza"/><meta property="article:tag" content="formularze React"/><meta property="article:tag" content="eksperymentalne API"/><meta property="article:tag" content="hooki React"/><meta property="article:tag" content="przesyłanie formularza"/><meta property="article:tag" content="formularze asynchroniczne"/><meta property="article:tag" content="progressive enhancement"/><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="Implementacja experimental_useFormStatus w React: Ulepszone zarządzanie stanem formularza"/><meta name="twitter:description" content="Odkryj eksperymentalny hook experimental_useFormStatus w React do usprawnionego zarządzania stanem formularza. Poznaj implementację, korzyści i zaawansowane użycie na przykładach."/><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>

Implementacja experimental_useFormStatus w React: Ulepszone zarządzanie stanem formularza

Czym jest experimental_useFormStatus?

Podstawowa implementacja

Wymagania wstępne

Przykład: Prosty formularz kontaktowy

Czym jest `experimental_useFormStatus`?