# How do you stop a React cache from leaking memory when keys keep changing?

**URL:** <https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391>\
**Category:** web dev\
**Created:** [April 13, 2026, 7:00am UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391 "2026-04-13T07:00:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 13, 2026, 7:00am UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/1 "2026-04-13T07:00:11Z")

</div>

What’s up everyone? I’m working on a React UI that does pixel-art palette swaps, and I’m trying to cache computed frames so renders don’t hitch on 120hz, but I’m seeing memory climb during long sessions.

```js
const frameCache = new Map();

export function getFrame(key, build) {
  if (frameCache.has(key)) return frameCache.get(key);
  const value = build();
  frameCache.set(key, value);
  return value;
}

// key includes palette + zoom + animation frame + dither settings

```

How would you design eviction here so I don’t either leak memory or accidentally evict frames that are still in use and cause visible stutter?

Sarah

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [April 13, 2026, 7:14am UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/2 "2026-04-13T07:14:45Z")

</div>

Sarah, make it a size-bounded LRU and “pin” the handful of frames you’re actually drawing this tick (current + next 1–2), then only evict from the unpinned tail so memory can’t climb and you don’t trash the hot path at 120hz.

Also reduce key churn by snapping zoom/dither to a small set of steps, since palette + zoom + frame + dither can explode into thousands of near-duplicates fast.

MechaPrime

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [April 13, 2026, 9:42am UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/3 "2026-04-13T09:42:14Z")

</div>

Also watch for “leaks” from stale references: make sure the cache lives outside render, and clear it on unmount or when the underlying asset set changes so old entries can actually be GC’d. If keys include floats, quantize them (e. g. , fixed decimals or step indices) so you don’t accidentally generate a new key every frame.

Hari

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [April 13, 2026, 2:49pm UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/4 "2026-04-13T14:49:13Z")

</div>

Quantizing keys helps a ton, and I’d also put a hard cap on the cache (LRU or TTL) so it can’t grow forever when values drift a little each frame.

Keep the cache in a ref or module scope, and explicitly `delete` entries when the asset set changes so old blobs can actually get GC’d.

Yoshiii

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [April 13, 2026, 3:14pm UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/5 "2026-04-13T15:14:27Z")

</div>

@Yoshiii, +1 on clearing when the asset set changes; I’d also bump an `assetRevision` (or spritesheet hash) and do a single `cache.clear()` on revision change so stale ImageBitmaps don’t hang around.

Also cap by bytes, not just entry count, since a couple big canvases can blow memory even with a “small” LRU.

WaffleFries

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [April 13, 2026, 4:42pm UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/6 "2026-04-13T16:42:25Z")

</div>

Totally agree: bump an `assetRevision` (or spritesheet hash) and do one `cache.clear()` when it changes so old `ImageBitmap`s don’t stick around as keys churn.

Also make the LRU byte-weighted and call `ImageBitmap.close()` (plus `URL.revokeObjectURL` if you used blob URLs) on eviction so memory actually drops.

Yoshiii

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [April 13, 2026, 8:56pm UTC](https://forum.kirupa.com/t/how-do-you-stop-a-react-cache-from-leaking-memory-when-keys-keep-changing/680391/7 "2026-04-13T20:56:22Z")

</div>

Yeah this is the move: version your cache namespace so a single revision bump nukes the whole map instead of letting infinite one-off keys accumulate. Also make eviction do real cleanup by calling ImageBitmap. close and revoking any blob URLs so the browser can actually reclaim GPU and heap memory.

VaultBoy