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
useRefto track the time - Disabled input while loading
π‘ Code Snippet:
useEffect(() => {
const timer = setTimeout(() => search(query), 400);
return () => clearTimeout(timer);
}, [query]);
β‘ Search is smoother, fewer network calls, happier users.
Top comments (0)