use useRefEffect instead of the requestAnimationFrame

WordPress · Apr 30, 2024 · c48a820 · c48a820
1 parent 43cea9c
commit c48a820
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -6,18 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	forwardRef,
-	useEffect,
-	useState,
-	useCallback,
-	useMemo,
-	useRef,
-} from '@wordpress/element';
+import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -238,14 +231,11 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
-	const searchRef = useRef();
-	useEffect( () => {
-		// We need to wait for the next frame to focus the search input
-		// becase the tabs component will try to focus the selected tab
-		window.requestAnimationFrame( () => {
-			searchRef?.current?.focus();
-		} );
-	}, [ selectedTab ] );
+	const searchRef = useRefEffect( ( element ) => {
+		if ( element ) {
+			element.focus();
+		}
+	} );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {

diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -35,9 +35,6 @@ export default function InserterSidebar() {
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div