Core: Prevent infinite rerendering caused by comparison by reference

[ghengeveld]

What I did

I discovered the entire Storybook app was getting rerendered on an infinite loop. I traced it down to the ManagerProvider which rerenders whenever any state changes. It was doing a direct equals check between two objects, which is getting replaced all the time regardless of any material changes to the value, so I replaced this with a deep equality check. This still leads to hundreds of rerenders (on first boot) before it eventually settles down after a few seconds, but that's infinitely better than rerendering on a loop.

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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.7 MB	77.7 MB	972 B	1.94	0%
initSize	136 MB	136 MB	-3.37 kB	0.45	0%
diffSize	58.4 MB	58.4 MB	-4.34 kB	-0.21	0%
buildSize	7.24 MB	7.24 MB	-4.13 kB	-0.26	-0.1%
buildSbAddonsSize	1.88 MB	1.88 MB	0 B	-	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.86 MB	-4.13 kB	-0.24	-0.2%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.94 MB	3.93 MB	-4.13 kB	-0.24	-0.1%
buildPreviewSize	3.3 MB	3.3 MB	0 B	-0.66	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	6.7s	25.8s	19s	1.39	🔺73.8%
generateTime	18.8s	21.1s	2.2s	0.25	10.6%
initTime	13.4s	14.3s	879ms	-0.09	6.1%
buildTime	9.9s	7.9s	-1s -978ms	-1.61	🔰-24.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.2s	5.7s	-1s -448ms	0.47	-25.1%
devManagerResponsive	5.3s	4.2s	-1s -75ms	0.42	-25.3%
devManagerHeaderVisible	998ms	617ms	-381ms	-0.48	-61.8%
devManagerIndexVisible	1s	701ms	-340ms	-0.13	-48.5%
devStoryVisibleUncached	2.8s	2.2s	-649ms	0.89	-29.4%
devStoryVisible	1s	655ms	-383ms	-0.47	-58.5%
devAutodocsVisible	975ms	576ms	-399ms	-0.13	-69.3%
devMDXVisible	981ms	585ms	-396ms	-0.04	-67.7%
buildManagerHeaderVisible	1.1s	752ms	-405ms	0.44	-53.9%
buildManagerIndexVisible	1.2s	893ms	-387ms	0.64	-43.3%
buildStoryVisible	1s	733ms	-313ms	0.7	-42.7%
buildAutodocsVisible	941ms	527ms	-414ms	0.14	-78.6%
buildMDXVisible	770ms	520ms	-250ms	0.17	-48.1%

Greptile Summary

This PR modifies the ManagerProvider component in Storybook's manager API to prevent infinite rerenders caused by uncontrolled addon state changes.

• Modified shouldComponentUpdate in code/core/src/manager-api/root.tsx to exclude addon state from rerender triggers
• Switched from mergeWith to isEqual for more accurate state comparison
• Changed comparison order to check path before state for better performance
• Addresses critical performance issue where addon state changes caused entire app to rerender infinitely

[greptile-apps]

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

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 8e2e08f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.