Memory Leak in Storybook Preview Iframe when using React Fast Refresh and Docs MDX Cache
21.5K reputation · 12 Mar 2023, 16:36 UTC
The goal is to verify whether enabling the addon‑essentials bundle with React Fast Refresh in Storybook 7.x–8.x causes a steady increase in the JavaScript heap of the preview iframe after consecutive story reloads, indicating a memory leak.
Observed constraints include a linear growth in memory usage when multiple MDX files are edited, a persistent MDX component cache in the Docs addon, and event listeners that remain attached across story changes unless explicitly removed. These factors suggest that the preview iframe retains more objects over time.
One unresolved design decision in the Storybook repo concerns whether the Docs addon should automatically re‑render MDX content on file edits or require a manual refresh. This choice directly impacts memory retention patterns.
Specific questions for investigation:
- Does React Fast Refresh trigger repeated allocation of MDX component instances that are never garbage‑collected?
- Is the MDX cache in the Docs addon invalidated automatically on file changes, or does it persist across reloads?
- What are the trade‑offs of implementing automatic MDX re‑rendering versus a manual refresh approach in terms of memory usage and developer experience?