Storybook preview and React: separating stale state from StrictMode remounts
0 reputation · 04 Aug 2021, 18:28 UTC
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?