Manager API: Fix infinite render-loop caused by useSharedState

[JReinhold]

What I did

Made the setter-function returned by useShareState stable, by wrapping it and its dependencies in useCallback.

A recent change in experimental-addon-test was causing all of the manager UI to infinitely re-render, because a setter from a useSharedState instance was added to a useEffect dependency array. That change itself was correct.

This would happen whenever a story with Component Tests was selected, as that would enter that code flow.

The consequences of this was that Visual Tests would infinitely load, because infinitely re-rendering its panel would cause API requests never to get fired by urql, essentially never loading any data.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Have a project with a functioning setup of addon-test and visual tests
2. Open a story that has interactions, and open the interactions panel
3. See that stepping through interactions still work, and collapsing/expanding steps still work
4. Open the Visual Tests panel and see that it loads snapshots correctly, not loading forever

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.8 MB	77.9 MB	27.9 kB	2.89	0%
initSize	131 MB	131 MB	29.2 kB	2.46	0%
diffSize	52.9 MB	52.9 MB	1.3 kB	-1.57	0%
buildSize	7.19 MB	7.19 MB	90 B	5.16	0%
buildSbAddonsSize	1.85 MB	1.85 MB	30 B	0.58	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	61 B	139.14	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	91 B	5.05	0%
buildPreviewSize	3.28 MB	3.28 MB	-1 B	-0.5	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	21.3s	17.9s	-3s -405ms	0.45	-19%
generateTime	22.4s	20.4s	-1s -974ms	-0.29	-9.6%
initTime	16.4s	13s	-3s -485ms	-1.09	-26.8%
buildTime	9.6s	10.1s	437ms	0.78	4.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5s	5.9s	862ms	1.41	🔺14.6%
devManagerResponsive	3.5s	4.1s	550ms	0.92	13.4%
devManagerHeaderVisible	579ms	567ms	-12ms	-0.83	-2.1%
devManagerIndexVisible	607ms	599ms	-8ms	-0.9	-1.3%
devStoryVisibleUncached	1.9s	2.2s	235ms	1.06	10.5%
devStoryVisible	608ms	600ms	-8ms	-0.91	-1.3%
devAutodocsVisible	398ms	515ms	117ms	-0.51	22.7%
devMDXVisible	524ms	549ms	25ms	-0.27	4.6%
buildManagerHeaderVisible	550ms	698ms	148ms	0.98	21.2%
buildManagerIndexVisible	650ms	815ms	165ms	1.29	🔺20.2%
buildStoryVisible	541ms	672ms	131ms	0.92	19.5%
buildAutodocsVisible	466ms	500ms	34ms	0.28	6.8%
buildMDXVisible	464ms	595ms	131ms	1.93	🔺22%

Greptile Summary

Fixed an infinite render loop in Storybook's manager UI by stabilizing the state setter function returned by useSharedState hook in code/core/src/manager-api/root.tsx.

• Added useCallback wrapper around setState function with api and stateId dependencies
• Fixed Visual Tests panel loading issue caused by infinite re-renders blocking API requests
• Resolved performance impact on Component Tests when stories with interactions are selected
• Maintained functionality for interaction panel features like step-through and expand/collapse

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (2)

code/core/src/manager-api/root.tsx:403

• Ensure that the behavior introduced by the useCallback hook for the setState function is covered by automated tests.

const setState = useCallback(

code/core/src/manager-api/root.tsx:454

• Ensure that the behavior introduced by the useCallback hook for the stateSetter function is covered by automated tests.

const stateSetter = useCallback(

[greptile-apps]

LGTM

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 80a3be2.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 37s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-14 12:41:54 UTC

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 80a3be2, ran on 14 January 2025 at 12:49:41 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/cli

	Before	After	Difference
Dependency count	397	398	🚨 +1 🚨
Self size	503 KB	496 KB	🎉 -7 KB 🎉
Dependency size	75.51 MB	75.55 MB	🚨 +45 KB 🚨
Bundle Size Analyzer	Link	Link