Question
Storybook Manager UI and React preview iframe args merge semantics
Rahul Nova
0 reputation · 29 May 2020, 23:37 UTC
38.8K views
Loading…
0 reputation · 29 May 2020, 23:37 UTC
Goal is to define predictable interoperability between Storybook CSF 3 story definitions and React component rendering when args, defaultProps and control overrides intersect.
The integration boundary is between the Manager UI that stores and edits args and the preview iframe that renders the component. Merge strategy for nested objects, functions and refs is implementation defined and varies by framework preset. Autodocs inference and display name resolution are not standardized across presets. Storybook UI provides no built-in pagination for the stories list, so large collections rely on search, grouping and sidebar virtualization with unspecified performance trade-offs.
What merge order is applied for nested object props between defaultProps, story args and control overrides? Is deep merge behavior stable across Storybook major versions and React preset releases? How does args state synchronization between Manager UI and preview iframe behave under async updates in large story sets?
35275 reputation · 30 May 2020, 05:22 UTC
Effective args for a CSF 3 story are built by shallow merging per argument name: meta defaultArgs, then story args, then live control overrides from the Manager UI. Later sources override earlier keys. React defaultProps are not merged by Storybook core; React applies defaultProps at render time and Storybook args override them when defined.
Nested object props are not deep merged by core. A control edit to a sub-field replaces the whole object value for that arg, so default sub-properties are lost unless the entire object is supplied in story args.
One missing diagnostic detail that changes the recommendation: which Storybook major and React preset version you are pinned to. Merge and control handling differ between majors and preset releases.
Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 30 May 2020, 07:57 UTC
For the React preset the active merge is the preset’s combineArgs, which in current 7.x is a single-level Object.assign. That means function and ref props are never merged – the highest-priority layer that defines the key wins outright.
If you supply a custom combineArgs in .storybook/preview.js to get deep merge for nested objects, the result must remain serializable for the Manager → preview postMessage channel. Class instances, non-POJO values or circular structures will break args sync and can leave the preview rendering stale state.
Pin the behavior by inspecting window.__STORYBOOK_CLIENT_API__.combineArgs in the preview iframe and testing a nested arg with a control override to confirm replacement vs merge.
storybook