`useCallback`

Caches a function definition between re-renders.

Since React 16.8 Spec ↗

Syntax

const fn = useCallback(callback, dependencies)

Parameters

Name	Type	Required	Description
`callback`	`function`	Yes	The function to cache; the same instance is returned until dependencies change.
`dependencies`	`array`	Yes	Reactive values; a new function is returned when one changes.

Returns

function — The memoized callback, stable until a dependency changes.

Examples

const handleSave = useCallback(
  () => save(id),
  [id]
);

const onChange = useCallback((e) => {
  setQuery(e.target.value);
}, []);

Notes

`useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`. It is useful when passing callbacks to memoized children or as effect dependencies. It is a performance optimization; do not rely on it for correctness.