Add a way to debounce the queries

[danhodkinson]

Bug: What is the current behavior? When we have a facet we wish to search through, it fires off a search query on every keystroke. If somebody is going to type quickly then it's a waste of query volume, especially as low pricing plans only have 75 per second.

Bug: What is the expected behavior? The ability to delay/throttle this behaviour would be really useful.

[BrentLayne]

@danhodkinson you can use a library like lodash to throttle the search query in your own code

[sampsonjoliver]

@BrentLayne can you provide or point to an example of this?

Definitely +1 to having this functionality out of the box though.

[samouss]

Here is an example that show how to implement it with connectSearchBox.

[approached]

Just create your own search component with a debounce:

Reference: https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci

Example:

import { useEffect, useState } from 'react'
import { connectSearchBox } from 'react-instantsearch-dom'
import useDebounce from '../components/useDebounce'

/**
 * https://www.algolia.com/doc/api-reference/widgets/search-box/react/
 * https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci
 */

const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => {
    const [searchTerm, setSearchTerm] = useState('')
    const debouncedSearchTerm = useDebounce(searchTerm, 200)

    useEffect(() => {
        if (debouncedSearchTerm) {
            refine(searchTerm)
        } else {
            refine('')
        }
    }, [debouncedSearchTerm])

    return (
        <form noValidate action="" role="search">
            <input
                type="search"
                onChange={e => setSearchTerm(e.target.value)}
            />
            <button onClick={() => refine('')}>Reset query</button>
            {isSearchStalled ? 'My search is stalled' : ''}
        </form>
    )
}
const SearchBoxBasic = connectSearchBox(SearchBox)

export default SearchBoxBasic

[mylesthedev]

👀

[Haroenv]

In React InstantSearch Hooks you can debounce using queryHook, as seen in this guide: https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/react-hooks/#disabling-as-you-type

[kopax-polyconseil]

Here is an example that show how to implement it with connectSearchBox.

I kind of can only disagree strongly that this should be managed on the end user code.

[robclancy]

It's crazy to me that this is not the default or at the very least an option. I got here after thinking I missed an option or there was a bug, because it wasn't even a consideration in my mind that there wouldn't be a debounce.

And the fact that plans are based on searches means the only logical reason I can think of for there not being one is to make more money. I just typed "bullshit" into search and it made 8 requests.

[dhayab]

Hi, I'm closing this issue as multiple solutions are provided and there are no short term plans to have this behavior in the library.

[kopax-polyconseil]

Hi, I'm closing this issue as multiple solutions are provided and there are no short term plans to have this behavior in the library.

I believe you should keep reopen if someone wish to pull, and because these multiple solutions are all workaround, not state of art development.

[robclancy]

Reopen this wtf

[Haroenv]

We will not implement major new features in React InstantSearch, non-hooks, but React InstantSearch hooks, as linked earlier already supports queryHook to debounce querying