Wzorzec 07

Optymistyczna odpowiedź

Użytkownik nie powinien czekać na serwer, żeby zobaczyć skutek własnego kliknięcia. Wzorzec optymistyczny pokazuje nowy stan od razu, wysyła żądanie w tle, a w razie błędu przywraca poprzedni stan i wyjaśnia przyczynę w zarezerwowanym miejscu.

Głosowanie na pomysły zespołu

Głos liczy się od razu, zapis leci w tle. Pomysł 2 zawsze zostanie odrzucony przez serwer, żeby pokazać wycofanie.

Skeleton generowany z tych samych propsów co treść
zapis…
Tokeny kontenerów wspólne dla Figmy i CSS
zapis…
Budżet Core Web Vitals w pipeline CI
zapis…

Reguły

Kliknięcie zmienia interfejs natychmiast, bez spinnera na głównej ścieżce.
Każda optymistyczna zmiana ma zapamiętany stan poprzedni, do którego można wrócić.
Wycofanie tłumaczy przyczynę w zarezerwowanym slocie, nie wyskakującym alertem.
Element w trakcie zapisu nie blokuje reszty interfejsu.

Wzorzec w kodzie

Zmiana od razu, zapis w tle, wycofanie z wyjaśnieniem

async function toggle(id: number) {
  const previous = votes[id];
  const optimistic = applyVote(previous);
  setVotes((state) => ({ ...state, [id]: optimistic }));
  try {
    await saveVote(id, optimistic);
  } catch {
    setVotes((state) => ({ ...state, [id]: previous }));
    setError("Serwer odrzucił zmianę, przywróciliśmy poprzedni state.");
  }
}

React 19 ma ten wzorzec wbudowany w useOptimistic

const [optimisticVotes, addVote] = useOptimistic(
  votes,
  (state, id: number) => applyVote(state, id)
);