getInsertionPoint: Avoid returning a different object on every call#53722
getInsertionPoint: Avoid returning a different object on every call#53722
Conversation
|
Size Change: -199 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
| */ | ||
| export function __experimentalGetInsertionPoint( state ) { | ||
| const { rootClientId, insertionIndex } = state.blockInserterPanel; | ||
| return { rootClientId, insertionIndex }; |
There was a problem hiding this comment.
The reducer state can be false, so the selector now can return also a boolean in addition to the { rootClientId, insertionIndex } object. On one hand that's fine, because false is object-like and false.rootClientId evaluates to undefined. It doesn't crash. On the other hand, the selector's return type becomes messy and TypeScript would be very sad seeing this.
I propose to also patch the reducers so that state.blockInserterPanel is always an object with the same shape, { rootClientId, insertionIndex }, sometimes plus filterValue. The initial values of the fields are null. And actions that until now were setting the state to false would reset the fields back to nulls.
There was a problem hiding this comment.
Agree. This is a bit confusing way to handle the state. I was just trying to keep changes related to the issue here, but I am also happy to work on those improvements.
The same state is responsible for opening the block inserter - setIsInserterOpened( true ). How do you suggest handling a truthy value? The insertionPoint data isn't required for opening the inserter.
There was a problem hiding this comment.
For the __experimentalGetInsertionPoint selector, it doesn't matter at all whether the state value is true or false. The const { rootClientId } = state destructuring always yields the same undefined value.
But patching the reducers is not as easy as I originally thought, because there's also the isInserterOpened selectors that cares about the boolean value.
We could do this:
const EMPTY_INSERTION_POINT = {
rootClientId: undefined,
insertionIndex: undefined,
};
function __experimentalGetInsertionPoint( state ) {
if ( typeof state == 'boolean' ) {
return EMPTY_INSERTION_POINT;
}
return state;
}That gives the selector a consistent return type, the same as it had before this PR, and it should be easy to implement.
There was a problem hiding this comment.
Sounds good. I'll update the PR.
I think in the future, we could split the state in two - isInserterOpen and blockInsertionPoint.
jsnajdr
left a comment
There was a problem hiding this comment.
Looks perfect now Thanks for addressing the feedback.
|
Nice optimization 👏 |
What?
Avoid returning a different object when the
__experimentalGetInsertionPointselector is called with the same state multiple times.There's one more definition of the same selector in the
edit-sitepackage. I'll handle it separately as it contains more logic.Why?
It prevents unnecessary rerenders. See #53666.
How?
Return
state.blockInserterPaneldirectly instead of destructuring and reconstructing the object.Testing Instructions
Selector warning
The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.Selector behavior
Screenshots or screencast
CleanShot.2023-08-16.at.13.22.53.mp4