Storybook preview and React: separating stale state from StrictMode remounts

Question

A React project uses Storybook’s preview iframe with global decorators for shared context and data initialization. The integration goal is to determine how to distinguish an apparently unchanged story after an edit from builder-specific HMR and story-index refresh behavior, React StrictMode’s development-only mount/unmount/remount cycle, or JavaScript module state retained within the preview.

Storybook and React expose separate lifecycle boundaries: decorators wrap stories, while React controls development effect lifecycles. The preview iframe isolates the story DOM from Storybook’s manager, but that does not establish that module state is reset between stories. Exact behavior also depends on the installed Storybook major, React version, builder package, and CSF format; CSF 3 is the assumed format, and builder internals should not be treated as a stable API.

Controlled evidence would need to correlate effect lifecycle events with actual story updates and distinguish an HMR refresh from a full reload. Which layer should own invalidation of changed args and shared data? Should global decorators be designed for idempotent initialization under StrictMode, or should state reset be delegated to the preview? What behavior should be documented as supported across the React Vite and Webpack builders?

Tasadduq Burney · Answer

Stale State vs. StrictMode Remounts
The apparent persistence of stale state after an edit in a Storybook preview is most likely due to retained JavaScript module state within the preview iframe, builder-specific Hot Module Replacement (HMR) caching, or Storybook index refresh, rather than React StrictMode remounts alone.
Confirmed Behavior and Ownership

StrictMode: In development (React 18+), StrictMode intentionally invokes component mount/unmount/remount cycles for side-effect verification; this does not automatically reset story arguments or module globals.
Module State: State initialized at the top level of a module (e.g., outside components or global decorators) persists across story switches within the same preview session, even with StrictMode active.
Isolation: The preview iframe isolates the DOM from the Storybook manager, but it does not enforce JavaScript module state resets.

Resolution Steps

Ensure all shared data initialization within global decorators is idempotent or re-initializes on every render cycle, rather than relying on module-level scope.
To isolate the cause, perform a hard-reload of the Storybook preview after an edit, bypassing HMR. If the edit appears only after a hard-reload, the issue is builder caching.
Use a diagnostic decorator that logs setup, cleanup, and remount events to confirm if the behavior matches StrictMode's repeated effect lifecycle in development.

The layer responsible for invalidating changed arguments is Storybook/CSF; React controls the rendering lifecycle.

Storybook preview and React: separating stale state from StrictMode remounts

1 answer

Stale State vs. StrictMode Remounts

Confirmed Behavior and Ownership

Resolution Steps

Your perspective belongs here.

0 question comments