TTL expiry, event-driven invalidation (mutation → bust tags), stale-while-revalidate, versioned URLs.

Caching & Networking

Cache invalidation strategies

<h2>Summary</h2>
<p>Double-click submit, retry, or duplicate events must not double-charge or duplicate records. Disable button during flight; dedupe by idempotency key server-side. UI debounce ≠ server idempotency — both needed. Especially payment, delete, toggle subscription.</p>
<hr />
<h2>Code example</h2>
<pre><code class="language-javascript">async function handleSubmit(e) {
  e.preventDefault();
  if (submitting) return;
  setSubmitting(true);
  try {
    await api.createOrder(formData);
  } finally {
    setSubmitting(false);
  }
}
</code></pre>
<h2>Key points</h2>
<ul>
<li>Double-click submit, retry, or duplicate events must not double-charge or duplicate records.</li>
<li>Disable button during flight; dedupe by idempotency key server-side.</li>
<li>UI debounce ≠ server idempotency — both needed.</li>
<li>Especially payment, delete, toggle subscription.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://react.dev/learn/reacting-to-input-with-state">Preventing duplicate submits</a></li>
<li><a href="https://react.dev/reference/react-dom/components/form">Form actions</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-4-deterministic-rendering">Deterministic rendering</a></li>
</ul>


Double-click submit, retry, or duplicate events must not double-charge or duplicate records.

State & Data Flow

Idempotent UI actions

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