Debouncing a Query

Why debounce?

The default behavior for using lazy queries is that the results flicker while typing the input. This is because every character we type or remove triggers a new GraphQL request. Let’s take a quick look at how to mitigate that.

Sending a query whenever the input changes seems a bit excessive. A better approach here is to wait a period of time after a user has finished typing before sending their query to the server. The technical term for doing such a thing is called debouncing. Debouncing can lead to performance improvements because the GraphQL API is not overwhelmed by running queries for each of the letters in a search term when a user types it into the search box.

Debouncing queries in a React application

To debounce a query, we’ll use a package called use-debounce, and we’ll import a function from that package called useDebouncedCallback in our components/Books/index.tsx file.