score:1
debounce
function return a function, but does not execute it yet. so you could think like this.
const handleonchange = (onchange) => (e) => {
e.persist();
console.log(e.target);
debounce(onchange, 500)();
};
this won't work, because each time you call handleonchange
, a new debounce function will be created. you must save debounce function some where and reuse it
const debouncedonchange = debounce((func) => {
fucn();
}, 500);
const handleonchange = (onchange) => (e) => {
console.log(e.target);
e.persist();
debouncedonchange(onchange);
};
you could pass arguments like this
const debouncedonchange = debounce((func) => {
func();
}, 500);
const handleonchange = (onchange) => (e) => {
console.log(e.target);
e.persist();
debouncedonchange(() => onchange(e));
};
if you use react <=16, be careful with event pooling.
runable solution at https://codesandbox.io/s/peaceful-margulis-mc8stj
Source: stackoverflow.com
Related Query
- Handling with event input and debounce function
- onChange event handler function attached with input field to update the state of the app executes once on first load and twice afterwords
- How to test an onChange input event with enzyme and jest
- Using Lodash debounce with React useCallback for input onChange event
- How leetcode do this: Read user's input String as multiple JavaScript functions and run a main function with user's input params
- React - Arrow function vs bind() and event with argument
- How to simulate click event with mock function in enzyme and Jest?
- Which is the right type for an event passed to the onKeyPressed function in React with MaterialUI and Typescript?
- React event handling with ref and media play
- testing react function with state update on input text using jest, rtl, and ionic
- Why this event handling function is being called twice and updates the state twice in react?
- Event handling in react: in which cases do we need to use arrow function on event, and when do we just need to pass class method(function)?
- How to create a signup form with React and Why won't a function be executed when called insight a form after input field?
- Mock function is not called in click event while testing with jest and enzyme
- React error on onclick event and function handling
- I want to pass two functions in onChange attribute in id password in input field. I want to pass event also and confirm() function also. (ReactJs)
- How to prevent auto input value change with same name and same onchange function in reactJs?
- My debounce from lodash is not working with input and Reacttsx
- Specifying onClick event type with Typescript and React.Konva
- Lodash debounce with React Input
- Cannot mock a module with jest, and test function calls
- Updating a React Input text field with the value on onBlur event
- How to test useEffect with async function and setState inside
- Testing with React's Jest and Enzyme when simulated clicks call a function that calls a promise
- Handling async request with React, Redux and Axios?
- Emitting and handling global events with react
- Fetch: set variable with fetch response and return from function
- React event handlers with Typescript and JSX
- react, differences between component create with extend class and simple const = function
- debounce textarea input with react/redux
More Query from same tag
- How to enable SettingDrawer in ant-design-pro v5
- I want to popup each item to view and edit . How can I do this using modal with router in react js?
- Why can't I change my input value in React even with the onChange listener
- Call function from sibling component React hooks
- Antd: how to make a SubMenu be a clickable link?
- How to use a global variable in several files
- Re-initializing class on redirect
- Javascript code to AST representation as we do in babelTypes
- Adding data fetched from an API into a Table automatically
- Elegant way to use variable font with MUI
- Getting a JSON asynchronously and THEN rendering the component
- I'm trying to convert a base64 encoded string to a image on my react file
- React JSX renders double quotes around element
- is it possible to update cell in bootstrap table in react?
- Hide navigation bar while login in reactjs
- React - what should be the propType of Material UI icon
- Framer motion Follow same duration on hover end
- How can i stop input elements from switching to from uncontrolled to controlled and vice versa using react hooks?
- How to access props.children in a stateless functional component in react?
- How to properly use refs in React functional components
- Replace mock credentials in S3Client with redux async thunk
- User.save to DB (use mongoose) is not a function
- caching issue with web application developed using reactjs & webpack
- adding value inside an input - React
- my react app contains p5 sketches that keep repeating
- Return component to original state or force re-render after using setTimeout()
- API call in ReactJS and setting response to state
- Tic tac toe react state not updating
- Can not use Leaflet with NextJS
- React - Set component state from external script