React Native - How to add debouncing

In our guide on setting up InstantSearch for React Native, we show how to create a custom SearchBox using the useSearchBox() hook.

When using this hook, you gain access to the queryHook prop. This function allows you to intercept and control when searches are triggered.

We suggest using this to implement debouncing in a React InstantSearch application, but the same can be applied to your React Native project. 

You can see an example in this guide, or refer to the code snippet below. 

const searchClient = algoliasearch('YOUR_APP_ID', 'YOUR_SEARCH_API_KEY');

let timerId = undefined;
let timeout = 200;

function App() {
  return (
    <InstantSearch indexName="YOUR_INDEX_NAME" searchClient={searchClient}>
      <SearchBox
        queryHook={queryHook}
      />
      <Hits />
    </InstantSearch>
  );
}

function queryHook(query, search) {
  if (timerId) {
    clearTimeout(timerId);
  }

  timerId = setTimeout(() => search(query), timeout);
}