mozilla / perfcompare

Improved Performance Comparison Tool
Mozilla Public License 2.0
39 stars 93 forks source link

Use good keys when rendering arrays of components #675

Closed julienw closed 4 months ago

julienw commented 4 months ago

In this PR I make sure that all rows and group of rows have unique keys that don't change. Previously we were using the index. This should make React's reconciliation algorithm faster when doing operations such as filtering. See https://legacy.reactjs.org/docs/reconciliation.html for more information about this algorithm.

I profiled locally when filtering out and in a platform, and this seems a bit faster than previously.

I'm requesting review from Beatrice because she should know whether my assumptions are correct.

netlify[bot] commented 4 months ago

Deploy Preview for mozilla-perfcompare ready!

Name Link
Latest commit 20295f260970e08e0382c2c21982cfee23fce8f4
Latest deploy log https://app.netlify.com/sites/mozilla-perfcompare/deploys/666aec29afe28b000808df69
Deploy Preview https://deploy-preview-675--mozilla-perfcompare.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov[bot] commented 4 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 91.41%. Comparing base (e3f14f5) to head (c23b07e). Report is 1 commits behind head on beta.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## beta #675 +/- ## ======================================= Coverage 91.41% 91.41% ======================================= Files 69 69 Lines 1620 1620 Branches 291 291 ======================================= Hits 1481 1481 Misses 111 111 Partials 28 28 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.