Unclear how to specify useCallback dependencies for useThrottler() or useThrottledCallback()

[marcoms]

It looks like referenced values passed to these functions will become stale if they are updated. The docs say:

For advanced usage requiring features like:

- Manual cancellation
- Access to execution counts
- Custom useCallback dependencies

Consider using the useThrottler hook instead

However the useThrottler docs do not mention anything about useCallback dependencies. Is it currently possible or do we have to use refs to access up to date values?

[karenrebecag]

You don't need useCallback dependencies or refs here: values read inside the callback don't go stale. useThrottler creates the Throttler instance once, but reassigns the function on every render (packages/react-pacer/src/throttler/useThrottler.ts):

const [throttler] = useState(() => new Throttler(fn, mergedOptions))

throttler.fn = fn
throttler.setOptions(mergedOptions)

and the core Throttler calls this.fn(...args) at the moment it executes (packages/pacer/src/throttler.ts, #execute), including the trailing call that fires from the timeout. So whatever fn the latest render passed in is the one that runs, closing over that render's state and props. useThrottledCallback is just useThrottler(fn, options).maybeExecute wrapped in a useCallback, so it behaves the same way. That's why the docs never mention dependencies: there's no dependency array to fill in.

The one thing to keep in mind is that there are two sources of values:

• Arguments you pass to the throttled function are captured when you call it. For a trailing execution, lastArgs is the arguments of the last call made during the wait.
• Anything the callback reads from the closure (state, props, context) comes from the most recent render at the moment it executes.

So if you need the value as it was at call time, pass it as an argument. If you want the latest value, read it from the closure:

const [query, setQuery] = useState('')
const [filters, setFilters] = useState(defaultFilters)

const search = useThrottledCallback(
  (q: string) => {
    // q: from the call; filters: from the latest render
    runSearch(q, filters)
  },
  { wait: 300 },
)

The same pattern applies to options: setOptions runs on every render, so changing wait or enabled from state takes effect without recreating anything.

[marcoms]

That is good to know - thanks!