Try reducing paragraph block rerendering #48460
Closed
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
|
Size Change: +137 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
ellatrix
commented
Feb 27, 2023
| @@ -297,10 +299,11 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => { | |||
| // access the block prop. | |||
| // Ideally these blocks would rely on the clientId prop only. | |||
| // This is kept for backward compatibility reasons. | |||
| block, | |||
| // block, | |||
There was a problem hiding this comment.
To do: proxy block as well.
jsnajdr
reviewed
Feb 28, 2023
|
This PR really eliminates rerendering of sidebar controls, but there are two other places where rerenders still happen, and could be eliminated. First, the toolbar buttons (when you have a fixed top toolbar) are rerendering on each content/selection change. That's because the The second place is the main The With this PR applied, there are still 30+ elements being updated on each keystroke. I set a logpoint into React Devtools source, to the place that collects elements to be highlighted, and on each keystroke I'm getting two updates, with 23 and 10 elements: You can see that the I think that these 33 remaining updates explain why the performance improvement is not so massive as expected. |
I looked at what the updates are on
|
|
@jsnajdr Sorry I missed your later comments and accidentally forced pushed my changes over yours. Feel free to force push the changes you made again if they were different. It still doesn't explain it fully to me, I was getting better improvements in #48420 with block filters, all of which are now no longer called on type with this PR. But yes, there's many components still re-rendering unnecessarily and that should be addressed. I'm aware of the rich text toolbar buttons re-rendering in fixed toolbar mode, I'll try to address it separately, but this doesn't contribute to the current perf metrics. |
|
How do you add a log point to the place where it's collecting the highlights? |
My commit was fixing the |
In devtools debugger, look at the scripts from the React Developer Tools, open the this.emit('traceUpdates', nodes);On this line, set a log point that logs a copy of
|
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.
What?
The amount of time React spends rendering is significantly less. While I see an improvement in manual profiling, I don't see the same result in the performance tests and I'm not sure why.
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast