Tips and Tricks #9: Debounce Search Inputs for Better Performance

Prevent excessive API calls by debouncing user input in search fields.

Code Snippet

// Reusable debounce utility
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// Usage in React component
function SearchBox({ onSearch }) {
  const debouncedSearch = useMemo(
    () => debounce((query) => onSearch(query), 300),
    [onSearch]
  );

  return (
     debouncedSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

Why This Helps

• Reduces API calls by 80-90% during typing
• Improves perceived responsiveness
• Prevents rate limiting issues

How to Test

• Log API calls and count during rapid typing
• Verify 300ms delay between last keystroke and call

When to Use

Search inputs, autocomplete, any user input triggering expensive operations.

Performance/Security Notes

300ms is a good default. Adjust based on use case. Consider showing loading state.

References

• https://lodash.com/docs/4.17.15#debounce

Try this tip in your next project and share your results in the comments!