React Academy · Oppitunti

useOptimistic välittömään palautteeseen

Näyttäkää optimistiset käyttöliittymäpäivitykset palvelinmutationin ollessa käynnissä useOptimisticilla.

Oppitunti 4/413 vaihetta

useOptimistic välittömään palautteeseen on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla käytätte React 19:n useOptimistic-hookia näyttääksenne käyttöliittymän optimistiset muutokset välittömästi palvelinmuutoksen aikana ja palauttaaksenne tilan automaattisesti, jos toiminto epäonnistuu.

Mitä optimistinen käyttöliittymä tarkoittaa?

Optimistinen käyttöliittymä tarkoittaa, että palvelinmuutoksen oletetaan onnistuvan ja käyttöliittymä päivitetään heti odottamatta palvelimen vastausta. Jos muutos epäonnistuu, tila palautetaan aiempaan arvoonsa.

useOptimisticin perusteet

useOptimistic vastaanottaa todellisen tilan ja päivitysfunktiota. Se palauttaa optimistisen tilan sekä funktion, jolla optimistisia päivityksiä käytetään.

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

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

Tykkäyspainikkeen esimerkki

Kun käyttäjä napsauttaa Like-painiketta, näyttäkää uusi tykkäys käyttöliittymässä heti addOptimisticLike-funktion avulla ja lähettäkää sitten varsinainen pyyntö. Jos pyyntö epäonnistuu, optimistinen tila palautuu automaattisesti todelliseen tilaan.

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

Missä optimistinen tila sijaitsee?

optimisticLikes näyttää optimistisen arvon Transition-siirtymän aikana. Kun palvelin vastaa ja todellinen `likes`-tila päivittyy (uudelleenvalidoinnin kautta), useOptimistic synkronoi tilan automaattisesti takaisin todelliseen tilaan.

Odottavien optimististen kohteiden ilmaisin

Merkitkää optimistiset kohteet visuaalisesti (esimerkiksi hieman himmennettyinä), jotta käyttäjät tietävät niiden olevan vielä odottamassa. Voitte lisätä optimistiseen päivitykseen `pending: true` -lipun ja muotoilla kohteen sen perusteella.

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

Käyttäminen Transition-siirtymän sisällä

useOptimistic toimii vain React Transition -siirtymän sisällä (startTransition tai useTransition). Kun React 19:n kanssa käytetään Server Actions -toimintoja, tämä käsitellään automaattisesti.

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

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

Esimerkki chat-viestin lähettämisestä

Näyttäkää lähetetty viesti heti chat-luettelossa, kun palvelin tallentaa sitä. Viesti näkyy välittömästi tilassa 'Lähetetään...', ja vaihtuu tilaan 'Lähetetty', kun palvelin vahvistaa tallennuksen.

Palautus virheen yhteydessä

Jos palvelintoiminto epäonnistuu (heittää virheen tai hylätään), useOptimistic hylkää optimistisen arvon automaattisesti ja palauttaa viimeisimmän todellisen tilan. Palautusta ei tarvitse toteuttaa itse.

useOptimistic verrattuna manuaalisiin optimistisiin päivityksiin

Ennen useOptimistic-hookia hallitsitte kahta tilamuuttujaa (todellista ja optimistista) ja palautitte tilan manuaalisesti catch-lohkossa. useOptimistic yhdistää tämän yhdeksi hookiksi, joka palauttaa tilan automaattisesti.

Pikatarkistus

Mitä optimistiselle tilalle tapahtuu, jos sen käynnistänyt palvelintoiminto epäonnistuu?

Vastaa interaktiivisessa oppitunnissa

Kertaus

useOptimistic(actualState, updater) palauttaa arvot [optimisticState, addOptimistic]. Kutsukaa addOptimistic-funktiota ennen palvelintoimintoa, jotta käyttäjä saa palautetta heti. React palauttaa tilan automaattisesti, jos toiminto epäonnistuu. Hook toimii React Transition -siirtymien sisällä.

Kurssi suoritettu

Onnittelut! Suorititte oppikokonaisuuden **Server Components & React 19 -ominaisuudet**. Ymmärrätte nyt RSC:t, use()-hookin, Actions-toiminnot, useActionState-hookin ja useOptimistic-hookin, joita käytetään nykyaikaisessa React-kehityksessä.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”useOptimistic välittömään palautteeseen” ilmainen?

Kyllä – oppitunnin ”useOptimistic välittömään palautteeseen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”useOptimistic välittömään palautteeseen”?

Näyttäkää optimistiset käyttöliittymäpäivitykset palvelinmutationin ollessa käynnissä useOptimisticilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”useOptimistic välittömään palautteeseen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Academy