DataViews: prevent unnecessary re-renders #57452
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
What Memoize Search, ViewActions, and Filters components. Why To prevent unnecessary re-renders. How The data retrieval hook (useEntityRecords) may be updated up to 4 times, according to its lifecycle. The data props (data, isLoading) may change so DataViews will re-render as well. There are some components that do not depend on data prop updates, they only depend on field & view updates. These should not re-render.
oandregal
added
[Type] Experimental
|
Size Change: +24 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
oandregal
requested review from
ntsekouras,
youknowriad and
jorgefilipecosta
oandregal
deleted the
update/components-remain-unchanged-by-data-updates
branch
|
I just realized that there is other component in the same situation: |
|
@oandregal Great work on these performance improvements. Do you think we should add a metric to track these improvements and prevent future regressions? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Part of #55083
Related #57390 #57393 #57450 #57454 #57458
What
Memoize Search, ViewActions, and Filters components.
Why
By preventing unnecessary re-renders,
DataViewsis ~33% faster in events that trigger data retrieval.DataViews(one round, not median)DataViewsDataViewsViewActions(same forSearchandFilters)ViewActionsHow
The data retrieval hook (
useEntityRecords) may trigger up to 4 updates, according to its lifecycle (idle, resolving with old data, resolving with new data, success). Each cause the Pages component to render, and soDataViews.The data props (
data,isLoading) may change in any of those updates, but theviewandfieldprops are updated only once (the first). There are someDataViewscomponents that do not depend on data props, they only depend onfield&view. This PR prevents them from re-rendering iffieldandviewprops have not changed.How to test
You can load the profiles in the React DevTools Profiler and take a look at the
DataViewscomponents. Alternatively, you can test it by:DataViews,Search,Filters, andViewActionscomponents.DataViewsis rendered 4 times whileSearch,Filters, andViewActionsis only rendered once. Before this PR, they'd render 4 times as well.Search,Filters, andViewActionsare still rendered once: this is correct, as theviewchanges (view.perPageis updated from 20 to 10). Fine-grained rendering forDataViewsneeds to be looked at separately.Gravacao.do.ecra.2023-12-29.as.13.44.38.mov