useOptimistic för omedelbar återkoppling
Visa optimistiska UI-uppdateringar medan en servermutation pågår med useOptimistic.
useOptimistic för omedelbar återkoppling är en gratis lektion i React Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Välkommen
Vad är optimistiskt UI?
Grunderna i useOptimistic
'use client';
import { useOptimistic } from 'react';
const [optimisticLikes, addOptimisticLike] = useOptimistic(
likes, // actual state from server
(state, newLike) => [...state, newLike] // how to apply optimistic update
);Exempel med gilla-knapp
async function handleLike() {
addOptimisticLike({ id: Date.now(), user: currentUser });
await likePost(postId); // server action
}Var det optimistiska tillståndet lagras
Väntande indikator för optimistiska objekt
const [optimisticMessages, addOptimistic] = useOptimistic(
messages,
(state, msg) => [...state, { ...msg, pending: true }]
);
// Render
{optimisticMessages.map(m => (
<div key={m.id} style={{ opacity: m.pending ? 0.6 : 1 }}>{m.text}</div>
))}Användning i en Transition
'use client';
import { startTransition } from 'react';
const handleSubmit = (data) => {
startTransition(async () => {
addOptimistic(data);
await serverAction(data);
});
};Exempel på att skicka chattmeddelanden
Återställning vid fel
useOptimistic jämfört med manuella optimistiska uppdateringar
Snabb kontroll
Sammanfattning
Kursen är slutförd
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”useOptimistic för omedelbar återkoppling” gratis?
Ja – hela texten till ”useOptimistic för omedelbar återkoppling” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”useOptimistic för omedelbar återkoppling”?
Visa optimistiska UI-uppdateringar medan en servermutation pågår med useOptimistic. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”useOptimistic för omedelbar återkoppling”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- React Server Components förklarade
- use()-hooken för asynkrona resurser
- React Actions och useActionState
- useOptimistic för omedelbar återkoppling