From 9437d4ec96c40256a199033bb48870271745456c Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 4 Dec 2024 14:10:14 -0600 Subject: [PATCH] Refactor to get isZoomedOut within useSelect --- packages/block-editor/src/hooks/use-zoom-out.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 32f154c0bec984..adcea8b605aeb7 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -22,9 +22,19 @@ export function useZoomOut( enabled = true ) { const { setZoomLevel, resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); - const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); - const isZoomedOut = isZoomOut(); + /** + * We need access to both the value and the function. The value is to trigger a useEffect hook + * and the function is to check zoom out within another hook without triggering a re-render. + */ + const { isZoomedOut, isZoomOut } = useSelect( ( select ) => { + const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) ); + return { + isZoomedOut: _isZoomOut(), + isZoomOut: _isZoomOut, + }; + }, [] ); + const controlZoomLevelRef = useRef( false ); const isEnabledRef = useRef( enabled );