The eslint-plugin-react-hooks does not seem to recognize the dispatch function from useReducer when it is returned from another function. If we use that returned function in a useCallback or useEffect, the plugin warns that the function should be added to the dependency list.
As per React docs:
React guarantees that `dispatch` function identity is stable and won鈥檛 change on re-renders. This is why it鈥檚 safe to omit from the `useEffect` or `useCallback` dependency list.
React version: 16.12.0
eslint-plugin-react-hooks version: 2.5.1
useCallback or useEffectconst useForceUpdate = () => {
const [, forceUpdate] = useReducer((x) => x + 1, 0);
return forceUpdate;
};
const Component = () => {
const forceUpdate = useForceUpdate();
const onClick = useCallback(() => {
console.log("CLICKED!");
forceUpdate();
}, []);
// ^ missing dependency forceUpdate
const [, forceUpdate2] = useReducer((x) => x + 1, 0);
const onClick2 = useCallback(() => {
console.log("CLICKED!");
forceUpdate2();
}, []);
// No warning
return (
<>
<button onClick={onClick} />
<button onClick={onClick2} />
</>
);
};
There is a warning on onClick
React Hook React.useCallback has a missing dependency: 'forceUpdate'. Either include it or remove the dependency array. eslint(react-hooks/exhaustive-deps)
There shouldn't be a warning, since useForceUpdate returns a dispatch function from useReducer.
This is intentional because a linter can only verify so much statically.
There's no harm to passing this function if it's truly stable.
Most helpful comment
This is intentional because a linter can only verify so much statically.
There's no harm to passing this function if it's truly stable.