Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] Inefficient selectors #3359

Merged
merged 1 commit into from
Jan 6, 2025
Merged

[FIX] Inefficient selectors #3359

merged 1 commit into from
Jan 6, 2025

Conversation

sggerard
Copy link
Collaborator

Objective

I noticed locally that certain pages were slow to load (Variances, Incidents). This isn't as noticeable on test and production due to the far lower amount of data and not running in dev mode. The cause turned out to be a couple of selectors used in mapStateToProps that were very slow due to an underlying functions use of the spread operator (...) in a reduce statement.

Generally in React we always aim to avoid mutating the state, which is one of the reasons the spread operator is so great - it creates a new object. However in this case when we are operating over a large number of elements in a list (1000+) this leads to issues and potentially even O(n2) time complexity. Directly mutating the object is linear and therefore far quicker for large datasets.

See:
https://prateeksurana.me/blog/why-using-object-spread-with-reduce-bad-idea/
https://stackoverflow.com/questions/44683789/using-spread-notation-in-array-reduce
https://typeofnan.dev/beware-the-reduce-spread-operator-combination/

Before:
image
After:
image

Copy link

Copy link

Quality Gate Passed Quality Gate passed for 'bcgov-sonarcloud_mds_minespace-web'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Copy link

@sggerard sggerard added 👍 Ready for review Pull request has been double checked by the author and is ready for comments and feedback. 💊 Fix Fixes something that isn't working :) labels Dec 30, 2024
@sggerard sggerard merged commit a59efe5 into develop Jan 6, 2025
15 checks passed
@sggerard sggerard deleted the fix-slow-selectors branch January 6, 2025 17:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💊 Fix Fixes something that isn't working :) 👍 Ready for review Pull request has been double checked by the author and is ready for comments and feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants