Hide default results in custom SeachBox

Hi,

I’m using React InstantSearch Hooks with a custom SearchBox and I can’t get the default results to disappear. I’m initiating refine on component load:

const { refine } = useSearchBox(props);

I’m also using a NoResultsBoundary:

const NoResultsBoundary = ({ children, fallback }) => {
    const { results, status } = useInstantSearch();
    ...
}

I’ve set it up like this in the render:

<NoResultsBoundary fallback={<NoResults />}>
    <Hits
        hitComponent={Hit}
        transformItems={removeEmptyHits}
    />
</NoResultsBoundary>

Hit just shows a custom anchor
transformItems removes some unwanted results

Now, my problem is that when everything is loaded, it shows some search results out of the box. I also see a XHR request happening. Also, when I start typing (and refining the result), before the new results that match my query are shown, I see a flash of the default results. I would like to hide these default results.

Can anyone help me achieve this? This seems like a common feature someone would want, but please let me know if you need more information.

Thanks!

Hi @yoni1

NoResults is for just that – when a user performs a search and there are no matching results returned.

You want to suppress results for empty queries. That’s documented here:

You need a conditional to check if the query is empty in the UI state and act accordingly.
Note that if you do wish to suppress the results, we recommend replacing them with an initial state with query suggestions or popular items to give users something with to engage with immediately.