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:

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.

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

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.

Enjoy!🤟