Algolia React default value and operation problem

Question

I'm using Algolia for autocomplete inside my React app. But I encountered a few problems during development:

1. The autocomplete already has standard hits if I don't type anything in, how can I turn it off?
2. How can I minimize the operations because now 1 character cost 1 operation, maybe with a type delay?

I'm using the algoliasearch/lite and react-instantsearch-dompackage.

Answer 1

1. From the example code in documentation you can check ther the search box is empty or not. Then render the hits only if currentRefinement is not empty:

    

import { connectAutoComplete } from 'react-instantsearch-dom';

const Autocomplete = ({ hits, currentRefinement, refine }) => (
  <ul>
    <li>
      <input
        type="search"
        value={currentRefinement}
        onChange={event => refine(event.currentTarget.value)}
      />
    </li>

    //Render only if currentRefinement not empty
    {currentRefinement && (
        hits.map(hit => (
          <li key={hit.objectID}>{hit.name}</li>
        ))
    )}

  </ul>
);

const CustomAutocomplete = connectAutoComplete(Autocomplete);

2. Debouncing can achived by using SearchBox example code the documentation