Search code examples
reactjslodashantddebouncing

Example to add debounce to autocomplete Ant Design

I need a bit of help here, I am new to react and I have this doubt.

I am not getting a working example of a to AutoComplete with debounce. i.e. my AutoComplete component is delaying in displaying entered text and while I am searching the solution for this I got to know we can overcome this by using AutoComplete with debounce. So please anyone can help with this by adding debounce to given sandbox link OR can suggest to me why it is delaying while displaying the entered text. Thank you.

Reference: https://codesandbox.io/s/crazy-galois-5v1mi

Solution

  • Use debounce method from lodash.

    import debounce from 'lodash/debounce';

<AutoComplete
  ...,
  onSearch={debounce(handleSearch, 300)} // 300 is your required delay
/>