javascript / expert
Snippet
Implementierung von optimistischen Updates mit useOptimistic
Der useOptimistic-Hook ermöglicht es dem UI, Änderungen sofort widerzuspiegeln, unter der Annahme, dass die Serveroperation erfolgreich sein wird. Dieses Muster verbessert die wahrgenommene Leistung erheblich, indem die 'Wartezeit' zwischen einer Benutzeraktion und dem UI-Update entfernt wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
'use client';import { useOptimistic } from 'react';export function CommentSection({ comments }: { comments: string[] }) {const [optimisticComments, addOptimisticComment] = useOptimistic(comments,(state, newComment: string) => [...state, newComment]);async function action(formData: FormData) {const text = formData.get('text') as string;addOptimisticComment(text);await saveComment(text);}return (<form action={action}>{optimisticComments.map(c => <div key={c}>{c}</div>)}<input name="text" /></form>);}
nextjs
Erklärung
1
useOptimistic(comments, (state, newComment) => ...)
Richtet den temporären Zustand ein, der zurückgesetzt wird, wenn die Aktion fehlschlägt oder der Server neu validiert.
2
addOptimisticComment(text);
Löst die sofortige UI-Änderung aus, bevor die Netzwerkanfrage abgeschlossen ist.