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 is not more suitable here. 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.