From 39b92c6ab2477f2810d3589c03f6b5abd3875685 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 15 Aug 2023 11:47:07 +0400 Subject: [PATCH 1/2] Try: Check values returned by the 'useSelect' hook for referential stability --- .../data/src/components/use-select/index.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index e1082b50a54657..c5dac7c33f3c65 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -43,6 +43,7 @@ function Store( registry, suspense ) { let lastMapResultValid = false; let lastIsAsync; let subscriber; + let didWarnUnstableReference; const createSubscriber = ( stores ) => { // The set of stores the `subscribe` function is supposed to subscribe to. Here it is @@ -134,6 +135,24 @@ function Store( registry, suspense ) { listeningStores ); + if ( process.env.NODE_ENV === 'development' ) { + if ( ! didWarnUnstableReference ) { + const secondMapResult = + registry.__unstableMarkListeningStores( + () => mapSelect( select, registry ), + listeningStores + ); + + if ( ! isShallowEqual( mapResult, secondMapResult ) ) { + // eslint-disable-next-line no-console + console.warn( + `The values returned by the 'useSelect' hook aren't referentially stable. This can lead to unnecessary rerenders.` + ); + didWarnUnstableReference = true; + } + } + } + if ( ! subscriber ) { subscriber = createSubscriber( listeningStores.current ); } else { From 5484bbdb0db1c412a59ceedf9c8cd66aa7f1e412 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 15 Aug 2023 17:04:29 +0400 Subject: [PATCH 2/2] Feedback --- packages/data/src/components/use-select/index.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index c5dac7c33f3c65..62da6a005c0d0b 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -137,16 +137,11 @@ function Store( registry, suspense ) { if ( process.env.NODE_ENV === 'development' ) { if ( ! didWarnUnstableReference ) { - const secondMapResult = - registry.__unstableMarkListeningStores( - () => mapSelect( select, registry ), - listeningStores - ); - + const secondMapResult = mapSelect( select, registry ); if ( ! isShallowEqual( mapResult, secondMapResult ) ) { // eslint-disable-next-line no-console console.warn( - `The values returned by the 'useSelect' hook aren't referentially stable. This can lead to unnecessary rerenders.` + `The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.` ); didWarnUnstableReference = true; }