useDebounce

This documentation covers both useDebounce and useDebounceCallback hooks for debouncing functionality. These hooks are particularly useful for optimizing performance in scenarios like search inputs, API calls, or any situation where you want to delay execution until after a pause in user activity.

Functions

useDebounce

A hook that acts like useState, but with debounced state updates.

const [state, setStateDebounced, setStateImmediate] = useDebounce(initialState, wait?, leading?);

Parameters:

• initialState : The initial state value or a function that returns the initial state
• wait : The debounce delay in milliseconds (default: 100)
• leading : When true, executes immediately on the first call, then debounces subsequent calls (default: false)

Returns:

• state : The current state value
• setStateDebounced : A debounced version of setState that waits for the specified delay
• setStateImmediate : The regular, immediate setState function

useDebounceCallback

A hook that debounces callback function execution.

const debouncedCallback = useDebounceCallback(callback, wait?, leading?)

Parameters:

• callback : The callback function to debounce. Wrap unstable callbacks in useCallback()
• wait : The debounce delay in milliseconds (default: 100)
• leading : When true, executes immediately on the first call (default: false)

Returns: A debounced version of the original callback

Usage

Simple State Debouncing

Use useDebounce just like useState, but with automatic debouncing:

Responsive Search with Debounced API Calls

Show immediate feedback while debouncing expensive operations:

Callback Debouncing

Useful for expensive operations like window resize handlers or form validation:

Leading Edge Execution

Execute immediately on the first call, then debounce subsequent calls:

Form Validation

Show immediate UI feedback but debounce expensive validation:

Best Practices

• Timing guidelines: Choose appropriate timing values based on use case:

  useDebounce(initialState, 100)   // 100ms - good for UI feedback
  useDebounce(initialState, 400)   // 400ms - good for search/API calls
  useDebounce(initialState, 1000)  // 1000ms - good for heavy operations
  

• Stable callbacks: When using useDebounceCallback, wrap unstable callbacks (those that depend on props or state) in useCallback() to prevent debouncing from breaking between renders.