storybook-addon-performance icon indicating copy to clipboard operation
storybook-addon-performance copied to clipboard

feat(storybook-addon-performance): add React 18 support, update tasks

Open akhdrv opened this issue 2 years ago • 4 comments

Hey! This PR adds support for React 18 and changes some of the tasks in the way that they do truthy reports for React 18.

Highlights:

  • Addon works normally for projects using React 16 and 18 (tested with storybook 6.3.8)
  • The logic for rendering, hydration and unmounting is now encapsulated in module util/react.ts
  • Client tasks are divided into several modules because of larger source just for comfortable reading. Some of them remain almost untouched
  • A helper component is added for measuring purposes
  • Since React 18 renders component asynchronously, the previous measuring solution is no longer suitable. Most tasks which measure components performance in terms of time are now based on several intermediate points: parent effect time (rendering time) and last underlying DOM change time (async effects in children that cause rerenders, ex. deferred scrolling with inline style changes). This solution waits for some of this two events to happen for a second, then returns the time of the last event. The solution doesn't pretend to be very accurate, however, since the metrics are laboratory and synthetic, this is not the case. Better accuracy only could be achieved using React DevTools
  • Thus, some tasks are NOT "backwards comparable" even using previous React versions
  • Results are relatively stable, the error at the 95th confidence level with 50 repetitions is less than 1% (I tested initial rendering task)

Known issues:

  • Fiber node count task doesn't work when using React 18
  • Opening storybook with addon updated and old results saved results in error. To avoid please clear localStorage
  • Complete render result could sometimes be less than initial render's because ReactDOM caches some of its internal work
  • Considering the previous issue, when starting all the tasks, the only truthy result is initial rendering time. To get the results with clear ReactDOM cache, you may want to run all the tasks first saving the result, then refresh the page and run them one by one, refreshing storybook page after each run.

Please feel free to comment & review

akhdrv avatar Dec 06 '22 16:12 akhdrv

@akhdrv This will need a rebase now and ideally if you can add a changeset:

pnpm changeset to create one.

DarkPurple141 avatar Feb 05 '23 23:02 DarkPurple141

I will aim to take a look at this soon

alexreardon avatar Feb 12 '23 23:02 alexreardon

I will aim to look at this soon

alexreardon avatar Feb 12 '23 23:02 alexreardon

Ok, I'll try to get back to this PR within next week

akhdrv avatar Feb 13 '23 10:02 akhdrv

Hi! I see that this PR is approved but also quite old. Are there plans to merge it in? I would love to have these updates!

apennell avatar May 15 '24 22:05 apennell

With React 19 around the corner this PR may soon be outdated. Are there any plans to continue updating this project?

FranCarstens avatar May 16 '24 13:05 FranCarstens