useActionState – nowy hook w React

React 19 wprowadził wiele nowych funkcji, w tym kilka ciekawych hooków, które ułatwiają zarządzanie stanem w aplikacjach React. Jednym z najbardziej intrygujących dodatków jest useActionState, który znacząco uprości obsługę operacji asynchronicznych, zwłaszcza w kontekście formularzy.

Co to jest useActionState?

useActionState to hook, który pozwala na aktualizowanie stanu komponentu na podstawie wyniku akcji formularza.

Jest to szczególnie przydatne, gdy chcemy, aby stan komponentu zmieniał się dynamicznie w odpowiedzi na dane zwrócone przez serwer po przesłaniu formularza.

Jak to działa?

1. Deklaracja Hooka: useActionState przyjmuje dwa główne argumenty: funkcję asynchroniczną (akcję) oraz stan początkowy. Funkcja ta jest wywoływana przy każdej próbie przesłania formularza.

   const [state, formAction] = useActionState(async (prevState, formData) => {
       // Logika akcji
       return { ...prevState, ...formData };
   }, initialState);

2. Użycie w Komponencie: Hook zwraca dwa elementy: aktualny stan oraz nową akcję, którą możemy przypisać do formularza lub przycisku w formularzu.

   return (
       <form action={formAction}>
           {/* Elementy formularza */}
       </form>
   );

Przykład Użycia

Rozważmy prosty przykład formularza, który zbiera imię i wiek użytkownika i dodaje je do listy użytkowników:

import { useActionState } from "react";

const UserForm = () => {
    const [state, formAction] = useActionState(async (prevState, formData) => {
        const name = formData.get("name");
        const age = formData.get("age");

        // Sprawdzanie czy użytkownik już istnieje
        if (prevState.users.some(user => user.name === name)) {
            return { ...prevState, error: "User already exists" };
        }

        // Dodawanie nowego użytkownika
        return { users: [...prevState.users, { name, age }], error: null };
    }, { users: [], error: null });

    return (
        <form action={formAction}>
            <input type="text" name="name" placeholder="Name" />
            <input type="text" name="age" placeholder="Age" />
            <button type="submit">Add User</button>
            {state.error && <div className="error">{state.error}</div>}
            <ul>
                {state.users.map(user => (
                    <li key={user.name}>{user.name} - {user.age}</li>
                ))}
            </ul>
        </form>
    );
};

Korzyści z używania useActionState

• Łatwiejsze zarządzanie stanem: useActionState automatyzuje aktualizację stanu na podstawie wyniku akcji, co upraszcza kod i zmniejsza ryzyko błędów.
• Interaktywność formularzy: Dzięki useActionState, formularze mogą być interaktywne i dynamicznie reagować na wyniki akcji bez potrzeby skomplikowanego zarządzania stanem i efektami ubocznymi.
• Zintegrowane z React Server Components: Gdy używany jest z komponentami serwerowymi React, useActionState pozwala na wyświetlanie wyników akcji serwera zanim JavaScript zostanie w pełni załadowany na kliencie.

Podsumowanie

useActionState to potężne narzędzie wprowadzane w React 19, które upraszcza zarządzanie asynchronicznymi operacjami w aplikacjach React. Jest szczególnie przydatne w kontekście formularzy, pozwalając na dynamiczne aktualizacje stanu na podstawie wyników akcji formularzy.

Aby dowiedzieć się więcej o useActionState, odwiedź oficjalną dokumentację React na react.dev.

Sprawdź również mój krótki tutorial o React.

Mam nadzieję, że ten wpis pomoże Ci lepiej zrozumieć nowości wprowadzone w React 19 i zachęci do eksperymentowania z nowym hookiem useActionState!