Header toolbar: useCallback to avoid unnecessary rerenders (#32406)

Author: gwwar

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
@@ -26,6 +26,10 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import TemplateTitle from '../template-title';
 import { store as editPostStore } from '../../../store';
 
+const preventDefault = ( event ) => {
+	event.preventDefault();
+};
+
 function HeaderToolbar() {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } = useDispatch(
@@ -73,6 +77,10 @@ function HeaderToolbar() {
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
 	const overflowItems = (
 		<>
 			<ToolbarItem
@@ -90,13 +98,20 @@ function HeaderToolbar() {
 				isPressed={ isListViewOpen }
 				/* translators: button label text should, if possible, be under 16 characters. */
 				label={ __( 'List View' ) }
-				onClick={ () => setIsListViewOpened( ! isListViewOpen ) }
+				onClick={ toggleListView }
 				shortcut={ listViewShortcut }
 				showTooltip={ ! showIconLabels }
 			/>
 		</>
 	);
-
+	const openInserter = useCallback( () => {
+		if ( isInserterOpened ) {
+			// Focusing the inserter button closes the inserter popover
+			inserterButton.current.focus();
+		} else {
+			setIsInserterOpened( true );
+		}
+	}, [ isInserterOpened, setIsInserterOpened ] );
 	return (
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
@@ -109,17 +124,8 @@ function HeaderToolbar() {
 					className="edit-post-header-toolbar__inserter-toggle"
 					variant="primary"
 					isPressed={ isInserterOpened }
-					onMouseDown={ ( event ) => {
-						event.preventDefault();
-					} }
-					onClick={ () => {
-						if ( isInserterOpened ) {
-							// Focusing the inserter button closes the inserter popover
-							inserterButton.current.focus();
-						} else {
-							setIsInserterOpened( true );
-						}
-					} }
+					onMouseDown={ preventDefault }
+					onClick={ openInserter }
 					disabled={ ! isInserterEnabled }
 					icon={ plus }
 					/* translators: button label text should, if possible, be under 16

packages/edit-site/src/components/header/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	ToolSelector,
@@ -27,6 +27,10 @@ import DocumentActions from './document-actions';
 import TemplateDetails from '../template-details';
 import { store as editSiteStore } from '../../store';
 
+const preventDefault = ( event ) => {
+	event.preventDefault();
+};
+
 export default function Header( {
 	openEntitiesSavedStates,
 	isEntitiesSavedStatesOpen,
@@ -86,6 +90,20 @@ export default function Header( {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
+	const openInserter = useCallback( () => {
+		if ( isInserterOpen ) {
+			// Focusing the inserter button closes the inserter popover
+			inserterButton.current.focus();
+		} else {
+			setIsInserterOpened( true );
+		}
+	}, [ isInserterOpen, setIsInserterOpened ] );
+
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
+
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
@@ -95,17 +113,8 @@ export default function Header( {
 						variant="primary"
 						isPressed={ isInserterOpen }
 						className="edit-site-header-toolbar__inserter-toggle"
-						onMouseDown={ ( event ) => {
-							event.preventDefault();
-						} }
-						onClick={ () => {
-							if ( isInserterOpen ) {
-								// Focusing the inserter button closes the inserter popover
-								inserterButton.current.focus();
-							} else {
-								setIsInserterOpened( true );
-							}
-						} }
+						onMouseDown={ preventDefault }
+						onClick={ openInserter }
 						icon={ plus }
 						label={ _x(
 							'Toggle block inserter',
@@ -123,9 +132,7 @@ export default function Header( {
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
 								label={ __( 'List View' ) }
-								onClick={ () =>
-									setIsListViewOpened( ! isListViewOpen )
-								}
+								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 							/>
 						</>