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

akhdrv commented 1 year ago

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