React Academy · Lektion

useOptimistic til øjeblikkelig feedback

Vis optimistiske UI-opdateringer, mens en servermutation er i gang, med useOptimistic.

Lektion 4 af 413 trin

useOptimistic til øjeblikkelig feedback er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion bruger du React 19's useOptimistic-hook til at vise øjeblikkelige, optimistiske ændringer i brugerfladen, mens en mutation på serveren er under behandling, med automatisk tilbagerulning ved fejl.

Hvad er en optimistisk brugerflade?

En optimistisk brugerflade antager, at en mutation på serveren lykkes, og opdaterer brugerfladen med det samme uden at vente på svaret fra serveren. Hvis den mislykkes, ruller du tilbage til den forrige tilstand.

Grundlæggende om useOptimistic

useOptimistic modtager den faktiske tilstand og en opdateringsfunktion. Den returnerer den optimistiske tilstand og en funktion til at anvende optimistiske opdateringer.

'use client';
import { useOptimistic } from 'react';

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,                      // actual state from server
  (state, newLike) => [...state, newLike] // how to apply optimistic update
);

Eksempel med en Synes godt om-knap

Når brugeren klikker på Synes godt om, viser du straks det nye antal Synes godt om i brugerfladen via addOptimisticLike og sender derefter den faktiske anmodning. Hvis anmodningen mislykkes, går den optimistiske tilstand automatisk tilbage til den faktiske tilstand.

async function handleLike() {
  addOptimisticLike({ id: Date.now(), user: currentUser });
  await likePost(postId); // server action
}

Hvor den optimistiske tilstand gemmes

optimisticLikes viser den optimistiske værdi under overgangen. Når serveren har svaret, og den faktiske `likes`-tilstand opdateres (via genvalidering), synkroniserer useOptimistic automatisk tilbage til den faktiske værdi.

Ventemarkør på optimistiske elementer

Markér optimistiske elementer visuelt, for eksempel ved at gøre dem en smule svagere, så brugerne ved, at de afventer. Du kan tilføje flaget `pending: true` i den optimistiske opdatering og style elementet derefter.

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>
))}

Brug i en overgang

useOptimistic fungerer kun inde i en React-Transition (startTransition eller useTransition). Når du bruger serverhandlinger med React 19, håndteres dette automatisk.

'use client';
import { startTransition } from 'react';

const handleSubmit = (data) => {
  startTransition(async () => {
    addOptimistic(data);
    await serverAction(data);
  });
};

Eksempel på afsendelse af en chatbesked

Vis straks en sendt besked i chatlisten, mens serveren gemmer den. Beskeden vises med det samme med statussen 'Sender...', og skifter derefter til 'Sendt', når serveren bekræfter den.

Tilbagerulning ved fejl

Hvis serverhandlingen mislykkes (kaster en fejl eller afvises), kasserer useOptimistic automatisk den optimistiske værdi og går tilbage til den seneste faktiske tilstand. Du behøver ikke selv at implementere tilbagerulning.

useOptimistic sammenlignet med manuelle optimistiske opdateringer

Før useOptimistic håndterede du to tilstandsvariabler (faktisk og optimistisk) og rullede manuelt tilbage i en catch-blok. useOptimistic samler dette i én hook med automatisk tilbagerulning.

Hurtigt tjek

Hvad sker der med den optimistiske tilstand, hvis serverhandlingen, der udløste den, mislykkes?

Besvar den i den interaktive lektion

Opsummering

useOptimistic(actualState, updater) returnerer [optimisticState, addOptimistic]. Kald addOptimistic før serverhandlingen for at give øjeblikkelig feedback. React ruller automatisk tilbage, hvis handlingen mislykkes. Det fungerer inde i React Transitions.

Kurset er gennemført

Tillykke! Du har gennemført **Serverkomponenter og React 19-funktioner**. Du forstår nu RSC'er, use()-hooket, handlinger, useActionState og useOptimistic til moderne React-udvikling.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “useOptimistic til øjeblikkelig feedback” gratis?

Ja — hele teksten til “useOptimistic til øjeblikkelig feedback” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “useOptimistic til øjeblikkelig feedback”?

Vis optimistiske UI-opdateringer, mens en servermutation er i gang, med useOptimistic. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “useOptimistic til øjeblikkelig feedback”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til React Academy