diff --git a/packages/block-editor/src/components/inserter/hooks/use-debounced-input.js b/packages/block-editor/src/components/inserter/hooks/use-debounced-input.js index 55d0ce989293e5..26cd6c0da0e0a9 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-debounced-input.js +++ b/packages/block-editor/src/components/inserter/hooks/use-debounced-input.js @@ -6,12 +6,13 @@ import { useDebounce } from '@wordpress/compose'; export default function useDebouncedInput( defaultValue = '' ) { const [ input, setInput ] = useState( defaultValue ); - const [ debounced, setter ] = useState( defaultValue ); - const setDebounced = useDebounce( setter, 250 ); + const [ debouncedInput, setDebouncedState ] = useState( defaultValue ); + + const setDebouncedInput = useDebounce( setDebouncedState, 250 ); + useEffect( () => { - if ( debounced !== input ) { - setDebounced( input ); - } - }, [ debounced, input ] ); - return [ input, setInput, debounced ]; + setDebouncedInput( input ); + }, [ input ] ); + + return [ input, setInput, debouncedInput ]; } diff --git a/packages/edit-site/src/utils/use-debounced-input.js b/packages/edit-site/src/utils/use-debounced-input.js index 55d0ce989293e5..26cd6c0da0e0a9 100644 --- a/packages/edit-site/src/utils/use-debounced-input.js +++ b/packages/edit-site/src/utils/use-debounced-input.js @@ -6,12 +6,13 @@ import { useDebounce } from '@wordpress/compose'; export default function useDebouncedInput( defaultValue = '' ) { const [ input, setInput ] = useState( defaultValue ); - const [ debounced, setter ] = useState( defaultValue ); - const setDebounced = useDebounce( setter, 250 ); + const [ debouncedInput, setDebouncedState ] = useState( defaultValue ); + + const setDebouncedInput = useDebounce( setDebouncedState, 250 ); + useEffect( () => { - if ( debounced !== input ) { - setDebounced( input ); - } - }, [ debounced, input ] ); - return [ input, setInput, debounced ]; + setDebouncedInput( input ); + }, [ input ] ); + + return [ input, setInput, debouncedInput ]; }