javascript / intermediate
Snippet
UX-Verbesserung mit dem useOptimistic-Hook
Der useOptimistic-Hook ermöglicht es, einen anderen Zustand anzuzeigen, während eine asynchrone Aktion (wie eine Server Action) läuft. Dies lässt die Benutzeroberfläche deutlich schneller wirken, da nicht auf die Antwort des Servers gewartet wird, um die Liste zu aktualisieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use client';import { useOptimistic } from 'react';function TodoList({ todos }) {const [optimisticTodos, addOptimisticTodo] = useOptimistic(todos, (state, newTodo) => [...state, { text: newTodo, sending: true }]);return (<form action={async (formData) => {const text = formData.get('text');addOptimisticTodo(text);await createTodo(text);}}>{optimisticTodos.map(todo => <li key={todo.text}>{todo.text} {todo.sending && '(...)'}</li>)}</form>);}
nextjs
Erklärung
1
const [optimisticTodos, addOptimisticTodo] = useOptimistic(...)
Initialisiert den optimistischen Zustand mit den Originaldaten und einer Reducer-ähnlichen Funktion.
2
addOptimisticTodo(text)
Aktualisiert die UI sofort mit dem temporären Zustand, bevor die Serveranfrage startet.
3
await createTodo(text)
Die eigentliche Serveranfrage; nach Abschluss wird der optimistische Zustand automatisch durch die echten Daten ersetzt.