score:5
Accepted answer
use debounce method from lodash.
import debounce from 'lodash/debounce';
<autocomplete
...,
onsearch={debounce(handlesearch, 300)} // 300 is your required delay
/>
score:5
adding debounce inline will often result in triggering on each keystroke.
if you want to debounce after the user has finished their key strokes then you will need to use usecallback
.
example -
const debouncedsearch = usecallback(
debounce(nextvalue => onsearch(nextvalue), 1000),
[], // will be created only once initially
);
const handlesearch = event => {
event.persist();
const { value: nextvalue } = event.target;
// even though handlesearch is created on each render and executed
// it references the same debouncedsearch that was created initially
debouncedsearch(nextvalue);
};
<autocomplete
...,
onsearch={handlesearch}
/>
i found this article useful and a recommended read. https://www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/
Source: stackoverflow.com
Related Query
- Example to add debounce to autocomplete Ant Design
- ant design v4 breaks react testing library tests for Select and Autocomplete
- Is it possible to add an image to a cell Table in Ant Design Tables?
- Ant Design add text only menu items
- How to add the input field inside the select option using ant design and react
- How to add custom components into Ant Design stepper?
- Clear ant design autocomplete
- Update state on search query in Ant Design AutoComplete
- how to add Tooltip on ant design tab?
- add Ant Design with ejected create-react-app project in Webpack config
- How to iteratively add Form.Item in Form.Item in ant design Form
- How can I add border-radius CSS property to dropdown ant design element?
- How can I add a blank editable row with Ant Design table?
- Ant Design : How to add an icon to a tab?
- How to add a radiobutton to select a row with ant design table
- Ant Design Sidebar Layout Example Not working as expected
- How to add hover over on ant design list items
- How to add className to Ant Design Mobile Dialog footer button?
- React js - Add unique key for ant design switch
- ant design - huge imports
- React | Ant design select default value
- Ant design responsive NavBar
- How to switch between themes in Ant design v4 dynamically?
- antd - ant design table with pagination control supporting a widget to choose rows per page?
- How can I add unique keys to React/MUI Autocomplete component?
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest?
- Ant Design React. Bootstrap Grid "container" concept
- React Ant Design styles not loading
- How to use react-hook-form with ant design or material UI
More Query from same tag
- NextJS & json-server loading slow on localhost using getStaticPaths
- React Material UI: How to disable typing in Autocomplete text field?
- React Inline Style: How would I refactor this border style?
- add input field when button is clicked
- turn a folder of mp3's into a searchable component
- Different state objets in React class component?
- GraphQL/Relay Schema Cannot query field "store" on type "CreateLinkPayload"
- Updating child array in reducer using React Context
- React Redux Thunk trigger multiple actions on one call
- Cannot access class property when fetching data in React JS
- Best practice when adding whitespace in JSX
- Next.js - no data in component when navigating from other route
- how can I use line break without any tag in html?
- React hook not triggering re-render with boolean state
- How to disable rendering of parent element if child attribute is true
- Ace editor. Set current edits state as base
- Cannot add .onClick method to object in child component
- Cannot read property of undefined when using react hooks
- Typescript throwing errors for spread operators
- Fill input value only if data present with react functional component
- React-Router locations on AWS s3 bucket do not work
- React Redux Confusion
- How can I turn an array object into an object?
- Can I safe navigate within useMemo
- React Redux doesn't update UI
- How to validate an object with a key inside it in Yup Validation
- React: How to pass data to children
- How should I organize my application?
- How can we store JWT token in Http only cookies?
- Your render method should have return statement?