Eine Action ist eine async-Funktion, die du React übergibst, meist über die action-Prop eines Formulars oder über startTransition. React verwaltet Pending-State, Fehler und Reihenfolge, statt dass du Boolean-Flags verdrahtest. useActionState nimmt eine Action und einen Initialzustand und gibt dir den aktuellen State, eine umhüllte Action fürs Formular und ein isPending-Flag zurück. useFormStatus liest den Pending-State aus einer verschachtelten Komponente, und useOptimistic rendert das erwartete Ergebnis sofort.
Warum Interviewer das fragen
Daran sieht der Interviewer, ob du am Ball geblieben bist, denn Actions ersetzen einen Haufen Boilerplate, den die meisten React-Codebasen noch mitschleppen. Er will sehen, dass du verstehst, dass Pending- und Fehlerbehandlung aus der Transition-Maschinerie kommen, und dass du optimistische Updates und ihr Rollback erklären kannst. Es ist außerdem ein guter Indikator dafür, ob du zuletzt serverseitige Mutations ausgeliefert hast.
So baust du deine Antwort auf
- Definier eine Action als async-Funktion, deren Lebenszyklus React verwaltet.
- Erklär, was useActionState zurückgibt und wo jedes Teil hingehört.
- Ergänz useFormStatus und useOptimistic und was sie lösen.
- Stell es dem manuellen Loading- und Fehler-State gegenüber, den du früher geschrieben hast.
Beispielantwort
Vor Actions hieß jede Mutation dieselben vier State-Stücke: Loading, Fehler, das Ergebnis und irgendetwas gegen Doppel-Submits. Actions falten das alles in React. Ich schreibe eine async-Funktion, die die Arbeit macht, übergebe sie useActionState mit einem Initialzustand und bekomme den aktuellen State, eine Action für die action-Prop des Formulars und isPending zurück. React führt sie in einer Transition aus, Pending-Flag und Reihenfolge kommen also gratis, und wenn zwei Submits sich überholen, gewinnt das spätere Ergebnis und nicht der Netzwerkaufruf, der zufällig zuletzt zurückkommt. Für einen Submit-Button tief im Formular nehme ich useFormStatus, damit er Pending lesen kann, ohne Props durchzureichen. Und bei so etwas wie einem Kommentarfeld ergänze ich useOptimistic, um den Kommentar sofort anzuzeigen, und wenn die Action wirft, rollt React den optimistischen State von selbst auf den echten zurück. Der praktische Gewinn ist, dass eine Formular-Komponente von rund siebzig Zeilen auf zwanzig schrumpft und die Edge Cases nicht mehr mein Gedächtnis belasten.
Steht dieses Vorstellungsgespräch bald an? GhostPilot hört bei deinem Live-Call mit, erkennt die Frage in dem Moment, in dem sie gestellt wird, und bringt dir eine strukturierte Antwort in Echtzeit auf den Bildschirm. Probier es im nächsten Mock aus, oder hol dir einen $29 Session Pass, kein Abo, für den Ernstfall.
So funktioniert esNachfragen, mit denen du rechnen solltest
- Was passiert mit dem optimistischen State, wenn die Action fehlschlägt?
- Wie spielst du einen Validierungsfehler aus einer Action zurück ans Formular?
- Wie verhalten sich Actions, bevor die Hydration fertig ist?
Weitere Fragen für React-Entwickler
Dein Interviewer stellt seine eigene Version davon. Kopier deine echte Stellenbeschreibung in den kostenlosen Question Predictor und bekomm die 20 Fragen, die diese Rolle am wahrscheinlichsten stellt, samt dem, worauf jede wirklich abzielt.
Meine Fragen vorhersagen