HEX
Server: Apache/2
System: Linux server-27-254-144-72.da.direct 5.10.0-33-amd64 #1 SMP Debian 5.10.226-1 (2024-10-03) x86_64
User: bannong (1179)
PHP: 8.1.26
Disabled: exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname
Upload Files
File: /home/bannong/public_html/wp-content/themes/astra/admin/assets/hooks/useDebounceEffect.js
import { useEffect } from 'react';
import { debounce } from '@astra-utils/helpers';

/**
 * A hook that wraps a callback function with a debounce effect.
 *
 * This hook is designed to delay the execution of a function until after a specified delay.
 * It's particularly useful for handling events that occur rapidly, such as typing in a text input.
 *
 * @param {Function} callback - The function to debounce.
 * @param {number} delay - The delay in milliseconds before the function is executed.
 * @param {Array} dependencies - An array of dependencies that trigger the effect.
 */
function useDebounceEffect( callback, delay, dependencies ) {
	useEffect( () => {
		const debouncedCallback = debounce( callback, delay );

		debouncedCallback();

		// Cleanup on unmount or when dependencies change.
		return () => debouncedCallback.cancel && debouncedCallback.cancel();
	}, [ callback, delay, ...dependencies ] );
}

export default useDebounceEffect;