score:13
the debounced function is getting recreated on every re-render.
you will need to wrap it in usecallback
which will hold the same reference unless one of the variables inside the dependencies array change
const changefilterdebounced = usecallback(
debounce(value => console.log(value), 3000, true),
[]
)
score:1
as you're using a functional component, all the functions defined will be reinitialized on each render, ie creating a new debounced function each time.
the possible workaround is to use usememo
and usecallback
along with it so that the reference of function does not change on each render.
const changefilterdebounced = debounce(changefilter, 3000, true);
can be changed into:
const changefilterdebounced = usememo(() => debounce(changefilter, 3000, true), [handlechange]);
and wrap handlechange
with usecallback
like:
const handlechange = usecallback(e => {
let { value } = e.target;
setsearchstring(value);
changefilterdebounced(value);
}, []);
the empty dependency array as the second argument of usecallback was provided, so that its ref will be the same till the component unmounts.
hope this helps.
score:1
debounce
is weird for that it bases on closure
which may leads many strange things. closure
means the function keeps the variables alive even if it returns. so it seems like there is an instance after invoked.
as in your case, you typed three chars. and everytime you typed, the setstate
got called which leads that react renders your component and produces a debounced function. every debounced function works separately. that is why you got three logs.
try using usecallback to make sure that you always use the first debounced function.
Source: stackoverflow.com
Related Query
- Debounce triggering multiple times in react
- What happens when using this.setState multiple times in React component?
- React component render is called multiple times when pushing new URL
- Why do you need to import React multiple times in parent and child components?
- React onChange handler is being called multiple times during page load
- React navigation event listeners being called multiple times
- React native List View onEndReached calling multiple times
- Multiple times render in react functional component with hooks
- Why is a React Ref callback (as an arrow function or inline function) called multiple times on initial page load?
- Function gets called multiple times in react
- Rendering a component multiple times with different props in React
- React component table is being rendered multiple times or duplicated after updating state
- React & React-router async components mounted multiple times (componentDidMount called many times)
- React ComponentDidMount being called multiple times
- How to prevent React Hook's useEffect from fetching data multiple times
- Whenever i send msg it is showing same message multiple times in react
- React functional component execute multiple times, with useSelector() is executed multiple times in each function component execution
- Components with uppercase function names are rendered multiple times in React Hooks
- Force remount component when click on the same react router Link multiple times
- react redux using useSelector multiple times in app
- How to call onEnter function on Route in React Router Multiple times
- use ES6 .map() on multiple times nested objects for react components
- Component functions runs multiple times react
- Running setInterval() inside React function happens multiple times and increases the amount rapidly over time
- Using ref react hooks multiple times
- Props mix when using the same component multiple times on a page in React
- react component re rendered multiple times when trying to invoke itself?
- react component not working properly when rendered multiple times
- React Google Map and React Places Auto Complete: You have included the Google Maps JavaScript API multiple times on this page
- React Highcharts firing setExtremes event multiple times
More Query from same tag
- Correct syntax for React.createElement in TypeScript/JSX
- React not initialising state
- Where do I put coding logic in my React Application
- Why am I getting parsing error with GlobalStyles in styled-components?
- How would one structure deep nested state tree with RecoilJS?
- Handling state and arrays of objects in React
- Automate what type of HTML element to pick React
- Is it possible to create children nodes that provide configuration to the parent component?
- Typescript Error using react-daterange-picker "No overload matches this call."
- ReactJS - TypeError: setPage is not a function
- How to make a folder static in react
- How to listen to localstorage value changes in react?
- React wait for server response
- Is there a way to wait for an action in redux-sagas?
- shouldComponentUpdate is not never called
- WebSocket problems with IBM Watson
- How to pass component as props with props in react?
- pushing history according to previously selected filters from localstorage
- React-Router useHistory() in nested functional component
- How to expand menu or close menu or array.map()
- Using only an array of ids as value with react-select
- React performance in mobile browser
- Files in aws s3 bucket are not public after they are synced by aws cli
- AWS JS SDK TypeError: STS is not a constructor
- How to pass data from AntD table to another component in React?
- Insufficient number of arguments or no entry found
- error: MyDocument.getInitialProps()" should resolve to an object with a "html" prop set with a valid html string (in document.js)
- Javascript - How to return a string from a regex instead of [Object object]
- Using props.children and styled-component "as" prop with typescript
- Multiple immutable changes on state arrays