diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js index 00b5cd50f0b581..db1f2dcdbe3ead 100644 --- a/packages/compose/src/hooks/use-focus-on-mount/index.js +++ b/packages/compose/src/hooks/use-focus-on-mount/index.js @@ -1,9 +1,14 @@ /** * WordPress dependencies */ -import { useRef, useEffect, useCallback } from '@wordpress/element'; +import { useRef, useEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; +/** + * Internal dependencies + */ +import useRefEffect from '../use-ref-effect'; + /** * Hook used to focus the first tabbable element on mount. * @@ -50,15 +55,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) { focusOnMountRef.current = focusOnMount; }, [ focusOnMount ] ); - useEffect( () => { - return () => { - if ( timerId.current ) { - clearTimeout( timerId.current ); - } - }; - }, [] ); - - return useCallback( ( node ) => { + return useRefEffect( ( node ) => { if ( ! node || focusOnMountRef.current === false ) { return; } @@ -80,5 +77,11 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) { } setFocus( node ); + + return () => { + if ( timerId.current ) { + clearTimeout( timerId.current ); + } + }; }, [] ); }