Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
After: