Skip to content

Comments

[Storybook] Fix infinite rerendering bug introduced in #8003#8024

Merged
cee-chen merged 2 commits intoelastic:mainfrom
cee-chen:storybook-rerendering-fix
Sep 16, 2024
Merged

[Storybook] Fix infinite rerendering bug introduced in #8003#8024
cee-chen merged 2 commits intoelastic:mainfrom
cee-chen:storybook-rerendering-fix

Conversation

@cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Sep 13, 2024

Summary

(Link to #8003)

It turns out Storybook's version of useState when set on a <div ref> results in infinite rerenders 💀 🫠 Moving the added portal/ref logic to an actual React component fixes the issue and incidentally also allows us to clean up our code a bit.

Real life footage of my laptop heating up to 100 degrees when I left Storybook open for hours not realizing that was happening:

Sweating

QA

General checklist

N/A, internal dev only

…Storybook state

- for whatever reason, storybook's useState was causing infinite looping rerenders :| we should just create a new React component that supports state/refs and call it a day
- cleaner, contain concerns in a single file
@cee-chen cee-chen added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Sep 13, 2024
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@cee-chen cee-chen marked this pull request as ready for review September 13, 2024 19:56
@cee-chen cee-chen requested a review from a team as a code owner September 13, 2024 19:56
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢 🐈‍⬛ Computer melting was successfully averted.
I tested it locally and can't reproduce the infinite looping anymore 👍

And nice additional re-organization of the code 🧹

* Primary EuiProvider decorator to wrap around all stories
* @see https://storybook.js.org/docs/writing-stories/decorators
*/
export const EuiProviderDecorator: FunctionComponent<
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added benefits:

  • non-melted computer ✨
  • more readable code organization 🧠

@cee-chen cee-chen merged commit 53801cc into elastic:main Sep 16, 2024
@cee-chen cee-chen deleted the storybook-rerendering-fix branch September 16, 2024 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants