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.