Feedback for “ensure-use-callback-has-non-empty-deps”

[bhollis]

This rule is not always applicable - functions cannot be hoisted if they depend on (capture) any other variable. If they are not wrapped in useCallback, they will not be stable.

Example

function MyComponent() {
  const [showSnapshot, setShowSnapshot] = useState(false);
  const handleSnapshot = useCallback(() => setShowSnapshot(true), []);

  return <OtherComponent onClick={handleSnapshot}>{showSnapshot ? 'Snapshot' : 'Nothing'}</OtherComponent>
}

In this example, handleSnapshot must be wrapped in useCallback to be stable, but it cannot be hoisted out of the function because it uses setShowSnapshot. I could add setShowSnapshot to the dependencies list, but it's a known-stable reference (from useState) and thus doesn't need to be provided.