Debounce is a programming technique that limits how often a function can execute. Instead of triggering a function immediately every time an event occurs, debounce ensures that the function runs only after a specified delay period of inactivity. This is especially useful in modern web applications where certain events, like typing in a search box, scrolling, or resizing, can fire repeatedly and rapidly.
In Next.js, debounce is commonly used to improve performance and user experience. For example, consider a search input that fetches results from an API. Without debounce, each keystroke could trigger a network request:
User types: "N E X T" Requests sent: N → NE → NEX → NEXT
This is inefficient and can overwhelm both the server and the client. By applying debounce, the API request is delayed until the user stops typing for a set period (e.g., 500ms):
User types: "N E X T" Function triggers: "NEXT" (after 500ms of no typing)
This approach reduces unnecessary API calls, improves app performance, and creates a smoother user experience.