Optimize the plots sections to reduce the number of useless re-renderings #3341
Conversation
| const currentSize = useSelector((state: PlotsState) => state.template.size) | ||
| const entries = useSelector( | ||
| (state: PlotsState) => state.template.sections[groupIndex].entries | ||
| ) |
There was a problem hiding this comment.
By not passing the entries as a prop, a section won't update when another section does.
|
Code Climate has analyzed commit 4d0eef2 and detected 0 issues on this pull request. The test coverage on the diff in this pull request is 100.0% (85% is the threshold). This pull request will bring the total coverage in the repository to 96.0% (0.0% change). View more on Code Climate. |
| (sections: PlotGroup[]) => { | ||
| /* Although the following dispatch duplicates the work the reducer will do when the state returns | ||
| from the extension, this is necessary to not see any flickering in the order as the returned state | ||
| sometimes takes a while to come back */ |
|
[Q] Can we automate re-render performance testing in some way? Very quick look around found this: testing-library/react-hooks-testing-library#135 |
I'll take a little bit of time to research this today. I think this could be very useful in the future. Even with virtualization, there is a lot of data rendered at once. Making sure we do not worsen re-rendering performance should be on own mind when developing in the plots webview (experiments table as well). |
|
Profiler API is probably the best tool for testing re-renders. The problem is that we don't want to test the number of re-renders for an isolated component and we do not want to profile simply the Might actually be able to use Why Did You Render directly for that as it does not need to wrap around a certain component. We can simply activate it with the name of the component, and there are options that could help with testing (mainly |
Part of #3334
Demo before
Screen.Recording.2023-02-23.at.4.06.15.PM.mov
Demo now
Screen.Recording.2023-02-23.at.3.54.24.PM.mov
Not a big improvement, but this should add up with the number of plots and it should make the code a little easier to read.