Data: Expose 'useSelect' warning to third-party consumers #67735
+54
−13
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
Mamaduka
added
[Type] Enhancement
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: 0 B Total Size: 1.83 MB ℹ️ View Unchanged
|
youknowriad
approved these changes
Dec 9, 2024
gziolo
approved these changes
Dec 9, 2024
Checking the code, I see preexisting checks like |
Mamaduka
force-pushed
the
update/expose-use-select-warning-to-consumers
branch
from
8154c46 to
062ecb8
Compare
|
Updated |
|
Flaky tests detected in cd53743. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12235884543
|
gziolo
reviewed
Dec 9, 2024
| @@ -19,6 +19,15 @@ import { | |||
| import _fontSize from '../font-size'; | |||
|
|
|||
| const noop = () => {}; | |||
| const EMPTY_ARRAY = []; | |||
There was a problem hiding this comment.
It looks like the check is helpful as it helps to promote best practices even in unit tests 😀
gziolo
reviewed
Dec 9, 2024
tyxla
reviewed
Dec 9, 2024
tyxla
approved these changes
Dec 9, 2024
Comment on lines
+25
to
+32
| beforeAll( () => { | ||
| // Do not run HOC in development mode; it will call `mapSelect` an extra time. | ||
| globalThis.SCRIPT_DEBUG = false; | ||
| } ); | ||
|
|
||
| afterAll( () => { | ||
| globalThis.SCRIPT_DEBUG = initialScriptDebug; | ||
| } ); |
There was a problem hiding this comment.
If we need this more and more in the future, we might consider abstracting it into an opt-in global jest setup/teardown configuration. However, for just 3 instances, it will be an unnecessary abstraction.
Mamaduka
added
the
Needs Dev Note
|
I think a dev note would be helpful here so folks aren't surprised. I'll try do draft something before I forget 😄 |
yogeshbhutkar
pushed a commit
to yogeshbhutkar/gutenberg
that referenced
this pull request
Dec 18, 2024
…67735) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: tyxla <[email protected]>
|
Here's a draft of the Dev Note. It is a bit technical, but that can't be avoided. Let me know if any adjustments need to be made. Data: A helpful performance warning for developers in the 'useSelect' hook
Usually, things just work, and consumers don't have to worry about unnecessary rerenders. However, sometimes data is directly manipulated in the Example: export function ExampleWithWarning() {
const { nameAndIds } = useSelect( function mapSelect( select ) {
const authors = select( 'core' ).getUsers( {
who: 'authors',
context: 'view',
} );
return {
// `Array.map` will return a new array for every call,
// even if the data is the same.
nameAndIds: authors?.map( ( { id, name } ) => ( { id, name } ) ),
};
}, [] );
return <>{ /* Your rendering logic here */ }</>;
}WordPress now will display a warning when Warning The Non-equal value keys: nameAndIds This warning can be fixed by requesting only the values needed to render a component or moving data manipulation outside the Please refer to the fantastic article "How to work effectively with the useSelect hook" to learn more about best practices for using the Here's how I would fix the example code from this post: export function ExampleFixed() {
const { nameAndIds } = useSelect( function mapSelect( select ) {
const authors = select( 'core' ).getUsers( {
who: 'authors',
context: 'view',
// Requests only fields that are needed.
_fields: 'id,name',
} );
return {
nameAndIds: authors,
};
}, [] );
return <>{ /* Your rendering logic here */ }</>;
}Props to @getsource for the review. |
Mamaduka
added
has dev note
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?
PR exposes the
useSelectperformance warning to third-party consumers. It would help them catch any possible issues while extending the block editor.The warning is only available when
globalThis.SCRIPT_DEBUGis true:SCRIPT_DEBUGconstant inwp-config.php.npm run dev.The bundle size increase should be negligible.
Why?
Everyone benefits
Testing Instructions
Test plugin
Testing Instructions for Keyboard
Same.
Screenshots or screencast