Storybook Performance Addon
· One min read
We've added a performance monitoring panel to Storybook! This new addon helps you identify performance issues in components during development.
What It Does
The @github-ui/storybook-addon-performance-panel provides real-time performance metrics for your stories:
- Render time — How long components take to render
- Re-render tracking — Identify unnecessary re-renders
- Performance warnings — Highlights components with concerning metrics
How to Use It
The addon is automatically available in Storybook. Look for the "Performance" tab in the addon panel when viewing any story.
Important Notes
- The addon was developed for
@storybook/react-vite, while we use@storybook/react-webpack5. Some values might not be 100% accurate, but it still helps identify outliers during development. - Storybook was updated to version 10.1+ to ensure compatibility with this addon.
Why This Matters
Performance issues are often discovered late in development or in production. By surfacing metrics during component development, you can:
- Catch performance regressions early
- Identify components that might need optimisation
- Make informed decisions about component complexity