DEV Community

sperez927
sperez927

Posted on

Debounced Search with useEffect + useRef (No UI Jank)

Optimized a product search bar in a React + AntD app.
🚫 Problem:

  • Every keystroke triggered API call
  • UI felt sluggish, unnecessary re-renders ✅ Fix:
  • Added debounced search via useEffect + setTimeout
  • Used useRef to track the time
  • Disabled input while loading

💡 Code Snippet:

useEffect(() => {
  const timer = setTimeout(() => search(query), 400);
  return () => clearTimeout(timer);
}, [query]);
Enter fullscreen mode Exit fullscreen mode

âš¡ Search is smoother, fewer network calls, happier users.

Top comments (0)