I'm trying to use the throttle
method from lodash
in a functional component, e.g.:
const App = () => {
const [value, setValue] = useState(0)
useEffect(throttle(() => console.log(value), 1000), [value])
return (
<button onClick={() => setValue(value + 1)}>{value}</button>
)
}
Since the method inside useEffect
is redeclared at each render, the throttling effect does not work.
Does anyone have a simple solution (without moving the throttle implementation outside of the component) ?
From the 2025 the best pattern I saw yet is(and other users noticed that below, please upvote their answers not mine):
const [search, setSearch] = useState('')
const onSearch = useMemo(
() =>
debounce((phrase: string) => {
setSearch(phrase)
}, SEARCH_DELAY),
[],
)
useEffect(() => {
return () => onSearch.cancel()
}, [onSearch])
For controlled component, though, we don't want to have a delay between keypress and character appearing in the field. In this case you may have two different state - one for the field value which is updated immediately and another - debounced - for a search value.
There were other users were noticing this approach, but my answer is listed first and I want to communicate that old answer is not relevant any more(or have never been?).
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.