How to use throttle or debounce with React Hook?

by

After some time passed I’m sure it’s much easier to handle things by your own with setTimeout/clearTimeout(and moving that into separate custom hook) than working with functional helpers. Handling later one creates additional challenges right after we apply that to useCallback that can be recreated because of dependency change but we don’t want to reset delay running.

original answer below

you may(and probably need) useRef to store value between renders. Just like it’s suggested for timers

Something like that

const App = () => {
  const [value, setValue] = useState(0)
  const throttled = useRef(throttle((newValue) => console.log(newValue), 1000))

  useEffect(() => throttled.current(value), [value])

  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

As for useCallback:

It may work too as

const throttled = useCallback(throttle(newValue => console.log(newValue), 1000), []);

But if we try to recreate callback once value is changed:

const throttled = useCallback(throttle(() => console.log(value), 1000), [value]);

we may find it does not delay execution: once value is changed callback is immediately re-created and executed.

So I see useCallback in case of delayed run does not provide significant advantage. It’s up to you.

[UPD] initially it was 

  const throttled = useRef(throttle(() => console.log(value), 1000))

  useEffect(throttled.current, [value])

but that way throttled.current has bound to initial value(of 0) by closure. So it was never changed even on next renders.

So be careful while pushing functions into useRef because of closure feature.

More Related Contents:

  1. Infinite loop in useEffect
  2. React-hooks. Can’t perform a React state update on an unmounted component
  3. In useEffect, what’s the difference between providing no dependency array and an empty one?
  4. React useState cause double rendering
  5. React useReducer async data fetch
  6. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  7. In general is it better to use one or many useEffect hooks in a single component? [closed]
  8. React hooks useEffect only on update?
  9. useNavigate() may be used only in the context of a component
  10. Testing React components that fetches data using Hooks
  11. Why React useState with functional update form is needed?
  12. React.useState does not reload state from props
  13. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  14. How do react hooks determine the component that they are for?
  15. React Hooks: how to wait for the data to be fetched before rendering
  16. useReducer Action dispatched twice
  17. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  18. is it possible to React.useState(() => {}) in React?
  19. React Hooks – How do I implement shouldComponentUpdate?
  20. React hook rendering an extra time
  21. Field Array in React using formik
  22. How to test a react component that is dependent on useContext hook?
  23. What is the expected return of `useEffect` used for?
  24. ReactJS – prevState in the new useState React hook?
  25. How to create dynamic refs in functional component- Using useRef Hook
  26. Put A Warning If Page Refresh in ReactJS
  27. React – Is useState ‘s setter function able to change?
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment