Cache Invalidation

Process of marking cached data as outdated.

html

<div class="civ civ--write">
  <div class="civ__entry"><span class="civ__before">user:42:profile</span><span class="civ__strike" style="background:#E8A020;">invalidated</span></div>
  <p class="civ__reason civ__reason--write">Reason: a write to this key happened at 14:02:11</p>
  <p class="civ__reason civ__reason--ttl-expiry">Reason: TTL expired at 14:02:11</p>
  <p class="civ__reason civ__reason--manual">Reason: manual purge requested at 14:02:11</p>
</div>
<style>
.civ { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.civ__entry { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; margin-bottom: 10px; }
.civ__before { flex: 1; font: 11px ui-monospace, monospace; text-decoration: line-through; color: #24143080; }
.civ__strike { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #241430; }
.civ__reason { display: none; margin: 0; font-size: 11px; color: #24143099; }
.civ--write .civ__reason--write, .civ--ttl-expiry .civ__reason--ttl-expiry, .civ--manual .civ__reason--manual { display: block; }
</style>

tailwind

<div class="civtw civtw--write font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <div class="flex items-center gap-2.5 p-3 rounded-lg bg-white border border-[#24143018] mb-2.5">
    <span class="flex-1 font-mono text-[11px] line-through text-[#24143080]">user:42:profile</span>
    <span class="text-[10px] font-bold py-1 px-2.5 rounded-full" style="background:#E8A020;">invalidated</span>
  </div>
  <p class="civtw__reason civtw__reason--write hidden m-0 text-[11px] text-[#24143099]">Reason: a write to this key happened at 14:02:11</p>
  <p class="civtw__reason civtw__reason--ttl-expiry hidden m-0 text-[11px] text-[#24143099]">Reason: TTL expired at 14:02:11</p>
  <p class="civtw__reason civtw__reason--manual hidden m-0 text-[11px] text-[#24143099]">Reason: manual purge requested at 14:02:11</p>
</div>
<style>
.civtw--write .civtw__reason--write, .civtw--ttl-expiry .civtw__reason--ttl-expiry, .civtw--manual .civtw__reason--manual { display: block; }
</style>

react

export function CacheInvalidation({
  entryKey = "user:42:profile",
  trigger = "write",
  accent = "#E8A020",
  showTimestamp = true,
}) {
  const reasons = {
    write: "a write to this key happened",
    "ttl-expiry": "TTL expired",
    manual: "manual purge requested",
  };
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: 12, borderRadius: 8, background: "#ffffff", border: "1px solid #24143018", marginBottom: 10 }}>
        <span style={{ flex: 1, fontFamily: "ui-monospace, monospace", fontSize: 11, textDecoration: "line-through", color: "#24143080" }}>{entryKey}</span>
        <span style={{ fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 999, color: "#241430", background: accent }}>invalidated</span>
      </div>
      <p style={{ margin: 0, fontSize: 11, color: "#24143099" }}>Reason: {reasons[trigger]}{showTimestamp && " at 14:02:11"}</p>
    </div>
  );
}