The main purpose of using useCallback does not rely on the presence of dependencies. It is primarily used to maintain referential integrity for better performance optimization, if needed.
Simply having a function or function expression in your code works efficiently without requiring additional steps to reference actual props. Therefore, useCallback mainly focuses on improving performance.
For instance, when rendering a pure component (such as an instance of React.PureComponent or functional component wrapped with React.memo)
function MyComponent() {
const onChangeCallback = ...
return <SomePureComponent onChange={onChangeCallback} />;
}
If onChangeCallback is declared simply as a function or arrow expression, it will be recreated each time the component renders, leading to unnecessary re-renders of nested child components.
Another scenario involves listing this callback as a dependency in other useCallback, useMemo, useEffect hooks.
function MyComponent() {
const onChangeCallback = ...;
return <Child onChange={onChangeCallback} />
}
...
function Child({onChange}) {
useEffect(() => {
document.body.addEventListener('scroll', onChange);
return () => document.body.removeEventListener('scroll', onChange);
}, [onChange]);
}
In this case, being without useCallback would result in having a different reference of onChange in Child, causing useEffect to run every time MyComponent is called, which is not necessary.
Therefore, it is more efficient to have an empty dependencies list when there are no actual dependencies instead of declaring functions inline without useCallback.