javascript / intermediate
Snippet
Optimistische UI-Updates mit useOptimistic
Der useOptimistic-Hook ermöglicht es, einen anderen Zustand anzuzeigen, während eine asynchrone Aktion (wie eine Server Action) noch läuft. Dies macht die Benutzeroberfläche deutlich schneller, da das erwartete Ergebnis sofort gerendert wird, noch bevor der Server es bestätigt.
snippet.js
1
2
3
4
5
6
7
8
9
10
const [optimisticMessages, addOptimisticMessage] = useOptimistic(messages,(state, newMessage) => [...state, { text: newMessage, sending: true }]);async function action(formData) {const message = formData.get('message');addOptimisticMessage(message);await sendMessage(message);}
nextjs
Erklärung
1
useOptimistic(messages, ...)
Initialisiert den optimistischen Zustand mit den aktuellen serverseitigen Nachrichten.
2
(state, newMessage) => [...state, ...]
Definiert, wie die UI während des Übergangs aussehen soll.
3
addOptimisticMessage(message)
Löst das sofortige UI-Update aus, bevor die eigentliche Serveranfrage abgeschlossen ist.