Same props/state → same output — no `Math.random()`, `Date.now()`, locale drift in SSR without sync.

State & Data Flow

Deterministic rendering

<h2>Summary</h2>
<p>Apply UI change before server confirms; on failure revert and notify. Requires idempotent server ops or conflict handling. Queue mutations offline with rollback on sync failure. TanStack Query <code>onMutate</code> / <code>onError</code> pattern. Never optimistic-delete without undo path.</p>
<h2>Code example</h2>
<pre><code class="language-javascript">async function toggleLike(postId) {
  const previous = likes[postId];
  setLikes({ ...likes, [postId]: !previous }); // optimistic

  try {
    await api.like(postId);
  } catch {
    setLikes({ ...likes, [postId]: previous }); // rollback
    toast.error('Could not save like');
  }
}
</code></pre>
<h2>Key points</h2>
<ul>
<li>Apply UI change before server confirms; on failure revert and notify.</li>
<li>Requires idempotent server ops or conflict handling.</li>
<li>Queue mutations offline with rollback on sync failure.</li>
<li>TanStack Query <code>onMutate</code> / <code>onError</code> pattern.</li>
<li>Never optimistic-delete without undo path.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://react.dev/learn/queueing-a-series-of-state-updates">Optimistic UI</a></li>
<li><a href="https://react.dev/learn/updating-objects-in-state">Updating state</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-4-event-sourcing-in-frontend">Event sourcing in frontend</a></li>
<li><a href="/blogs/level-4-deterministic-rendering">Deterministic rendering</a></li>
</ul>


Apply UI change before server confirms; on failure revert and notify.

Optimistic UI rollback strategy

Append-only event log as source of truth; UI derives state by folding events — enables undo, replay, audit, time-travel debug.