Navigation: avoid rerendering when placeholder does not change #32357
Conversation
This file contains hidden or 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: -567 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
gwwar
commented
May 31, 2021
| const placeholder = useRef(); | ||
| useEffect( () => { | ||
| placeholder.current = <PlaceholderPreview />; | ||
| }, [] ); |
Contributor
Author
There was a problem hiding this comment.
or this preferable?
const placeholder = useMemo( () => ( <PlaceholderPreview /> ) , [] );
Member
There was a problem hiding this comment.
The is a third option in
import { memo } from 'react';
const placeholder = memo( <Placeholder /> );It might be worth it to wrap placeholder-preview.js itself with memo, as it is a display component that shouldn't change between re-renders.
export default memo( PlaceholderPreview );
Member
There was a problem hiding this comment.
I think using one of the memo functions will make it easier to scan and understand.
Contributor
Author
There was a problem hiding this comment.
Good suggestion @vcanales! However while testing it looks like the HoC memo doesn't appear to work this this context. I'll try the useMemo line next.
Contributor
Author
Contributor
|
Thanks for working on this. Same feedback as the other one, I don't see a huge impact in performance:
But I very much appreciate this as a step on the path! |
Contributor
Author
|
Thanks for the reviews @vcanales @Mamaduka @jasmussen ! |
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.
When editing a post with a lot of navigation links, typing in a paragraph block is slowed down considerably. One of the top reasons for re-renders is the placeholder component passed to innerBlocks.
Before:
beforeplaceholder.mp4
After:
placeholder-after.mp4
Testing instructions
/navigationand selecting the navigation block
- Add a number of navigation links and try to type in another paragraph - In trunk: confirm that one of the main reasons for re-render is the placeholder prop in the react profiler (see before video) - On this branch: verify that the placeholder prop no longer shows up as a reason for rerender (see after video)