javascript / expert
Snippet
Atomare optimistische UI mit useOptimistic für mehrstufige Übergänge
Verwenden Sie den useOptimistic-Hook, um während der Ausführung einer Server Action sofortiges visuelles Feedback zu geben. Dieses Muster hält einen deterministischen Abgleich zwischen dem temporären UI-Status und der schließlichen Serverantwort aufrecht.
snippet.js
1
2
3
4
5
6
7
8
const [optimisticState, addOptimistic] = useOptimistic(state,(currentState, newValue) => ({...currentState,...newValue,isPending: true}));
nextjs
Erklärung
1
useOptimistic(state, reducer)
Hook, der einen temporären Status während eines asynchronen Übergangs verwaltet.
2
(currentState, newValue) => ...
Die Reducer-Logik, die definiert, wie das optimistische Update mit dem bestehenden Status verschmilzt.
3
isPending: true
Flag, um optimistische Daten visuell von verifizierten Serverdaten zu unterscheiden.