Mitä ovat optimistiset päivitykset ja kuinka toteitat ne turvallisesti?

Question

Accepted Answer

**Optimistinen päivitys** päivittää käyttöliittymän **välittömästi**, *olettaen*, että palvelimen pyyntö onnistuu, sen sijaan että odottaisit vastausta. Tämä saa sovelluksen tuntemaan välittömältä — mutta sinun on käsiteltävä tapaus, jossa pyyntö epäonnistuu, **peruuttamalla** muutokset.

## Kontrasti

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

## Miksi sillä on merkitystä käyttäjäkokemukselle

Korkean varmuuden toimintojen osalta (postauksen tykkääminen, tehtävän vaihtaminen, chat-viestin lähettäminen) pyyntö onnistuu lähes aina, joten round-trip-odottaminen vain lisää havaittua viiveistä. Optimistiset päivitykset tekevät näistä välittömiä.

## Sen turvallinen toteuttaminen (peruutus on kriittinen)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

Turvallisuuden avain: **ota kuvakaappaus edellisestä tilasta ennen optimistista muutosta** ja palauta se, jos pyyntö epäonnistuu. Peruutuksen ohittaminen jättää käyttöliittymän valehtelemaan palvelimen tilasta — vaarallisen virheen, jonka optimistiset päivitykset voivat tuoda.

## React Query:llä (sisäänrakennettu tuki)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

React Query formalisoi mallin: `onMutate` (kuvakaappaus + optimistinen päivitys), `onError` (peruutus), `onSettled` (uudelleenhaku totuuden vahvistamiseksi).

## Milloin käyttää / välttää

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

## Miksi sillä on merkitystä

Optimistiset päivitykset ovat tehokas käyttöliittymätekniikka, joka saa sovellukset tuntemaan välittömiltä olematta riippuvaisia verkosta — mutta ne ovat *turvallisia* vain, jos toteutat peruutuksen (kuvakaappaus-sitten-palauta) ja näytät virheet.

Malli (kuvakaappaus → päivitys → epäonnistumisen yhteydessä peruutus → täsmäytys) on olennaista tietoa, ja sen ymmärtäminen, milloin se on sopiva (todennäköisesti onnistuvat, matalariskiset toiminnot) verrattuna vaaralliseen (maksut) on se, mikä erottaa hioutuvan ja luotettavan käyttöliittymän sellaisesta, joka hiljaa vääristää palvelimen tilaa.