You need to wrap the _.throttle() in a useCallback() hook.
In react functional components, the function body is called on every render so the line
const throttledOnKeyDown = _.throttle(handleOnKeyDown, 1000); gets called every render and creates a new instance of the _.throttle() function so it can never reach its settling time. useCallback memoizes the function so that you get the same instance from one render to the next.
See this blog post about using _.debounce() in react. The same concept applies to throttle: https://nodeployfriday.com/posts/react-debounce/
- Getting lodash throttle to work with Redux Action
- Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Calling an action from a different reducer with React and redux
- simplify redux with generic action & reducer
- Dispatch a Redux action with the subsequent action as payload to show a snackbar or dialog of Material UI
- Getting React Developer Tools to Work with Webpack
- How to fetch data by existing redux action with hooks?
- Redux state doesn't update with action dispatch
- Getting keyboard navigation to work with MUI Autocomplete and SimpleBar for react
- Redux Toolkit: How to refer action created with createAction as type
- using react with redux and Getting error in redux '=' expected
- Redux Toolkit doesn't work well with WebStorm
- Getting TS error with Redux dispatch action, `Property does not exist on type`
- Getting SSR to work with the React Context API
- React Redux with redux-observable use the router to navigate to a different page after async action complete
- Returning a dispatch with promises in action creators of react redux
- Dispatching a Redux Thunk action outside of a React component with TypeScript
- Can't get basic test to work in react-testing-utils with redux
- How action and reducers are connected with each other in react redux
- How to handle my redux store with Lodash and Normalizr?
- How to fetch data with multiple requests in Redux action creator and then send collected data to reducer?
- equalityFn in Redux useSelector doesn't work with objects and arrays
- Getting object spread to work with webpack.config and babelrc files
- Passing a Redux Action to a child component with props
- How to test redux action by onClick with enzyme
- De-duplicating redux action logic with high order reducers
- In React with Redux how to make double colons work
- redux dispatch action and reducer with new state
- How to update a field value after action dispatched with redux
More Query from same tag
- How do I add type to onChange & onClick functions in typescript react
- Is it possible that React modifies a reference?
- How to use Cyrillic in react-pdf?
- How to transition routes after an ajax request in redux
- React Js - Styling innerHTML on component - Not working - Parent styling is overriding child styling
- Why does chrome dev tools console show a link for Post 500 error in one website but not another?
- How to get label values dynamically and adding the numbers together from different input with reactjs
- Observable timer: return action after timer finished
- Testing Apollo Mutation graphql errors
- Change route after submit form in react with typescript
- Modifying default configuration for react app
- Reactjs redux: Fetch PUT method sending only an OPTIONS method, even when the status is 200
- How Can i send image and text user information in react js
- How to change the font size of selected text in TextField Select from material-ui
- Remove state from history using react router dom
- how to dispatch actions outside React Compoenent
- Unexpected end of input when using fetch API in react
- React - Select multiple checkboxes holding Shift key
- TypeError: validation is not a function in react.js
- React - Cannot read properties of undefined (reading 'pathname')
- How to add if-else statement within onClick event based on radio buttons
- ReactJS application passing state to multiple pages
- React BrowserRouter works when navigating on localhost. Refreshing a not-home-page when deployed throws 404 not found
- How to fix WebApp keeps rendering state?
- Why typescript throw error at useState react
- Material-UI Typography doesn't center in Tool Bar
- how to render react component getting error "TypeError: x.IndexPage is not a function"
- Setting state in React context provider with TypeScript, functional components and hooks
- Add script tag to React component without using props or context in NextJS