DEV Community

Cover image for Introducing Storybook Addon Performance🚀
Slava Borodulin
Slava Borodulin

Posted on

Introducing Storybook Addon Performance🚀

Good day! Today I will introduce an awesome tool that will be useful for every React developer. Storybook Add-on Performance🚀!!!.

Who doesn't know about storybook:

GitHub logo storybookjs / storybook

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!


Build bulletproof UI components faster

Build Status on CircleCI CodeFactor Known Vulnerabilities codecov License
Storybook Community Backers on Open Collective Sponsors on Open Collective Official Twitter Handle

Storybook is a development environment for UI components.
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
Find out more at

View README for:
latest next future

Table of contents

Getting Started

Visit Storybook's website to learn more about Storybook and to get started.


Documentation can be found Storybook's docs site.


Here are some featured examples that you can reference to see how Storybook works:

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been…

Over the year Atlassian team worked on the experimental addon for a storybook. This add-on can help to understand and debug performance problems with React components.

Performanse tests

When should I use it?

  1. During development, you can take into consideration the results of the tests. The performance metrics will show when something goes wrong.
  2. For performance issues. Reports from performance addon can show how effective your refactor is.

Tips for correct performing measurements

  1. Part of metrics has constant results during repeated tests and has no direct effect on performance:

    • string output size
    • string output size(gzip)
    • static markup output size
    • static markup output size(gzip)
    • dom elements count
  2. The results of rendering metrics have a significant difference during repeated tests:

    • initial render
    • re-render
    • render to string
    • render to static markup
    • hydrate dirferent results during repeated tests
  3. To minimize inaccuracy you can

    • choose the max count of samples
    • repeat tests and compare results on the same machine with the same state of the system (system upload and the temperature has an efficient effect)
    • for QA testing you can use a separate computer with turn off thermal throttling, turn off turbo boost, and with setting the maximum number of fan revolutions
  4. Use the 99 percentile for measurements. The explanation is in this article.


GitHub logo atlassian-labs / storybook-addon-performance

🚧 A storybook addon to help better understand and debug performance for React components.

storybook-addon-performance 🚀

A storybook addon to help better understand and debug performance for React components

storybook-addon-performance demo

🚧 This addon is experimental and a work in progress. We are not on stable versions yet 🚧

📺 Project overview by Jack Herrington

Highlights 🌟

  • Zero config (except for interactions): Generate performance information relating to server-side rendering and client-side mounting without any configuration
  • Pin results: You can run some tasks, pin the result, make some changes, rerun the tasks and see what changed
  • Save/Load results: You can run some tasks, save the results as a local artifact, and run them again later by loading the artifact back into the addon.
  • Interactions: Add your own custom user interactions to run as a parameter to your story. This lets you time how long interactions take. The API for this is super flexible and powerful!
  • Control: Run all tasks for an overview…

Top comments (0)