Add lint rule for useRecoilCallback deps array

Custom hooks that have custom dependency arrays can’t be statically analyzed by the react-hooks linter rule, and can’t have their dependencies automatically tracked. Because of this, I’d suggest either:

1. Accept a callback and add that callback to the deps array of the internal useCallback. It’ll make the callback on each render, or if the passed callback is useCallback’d, whenever the passed callback is recreated

2. Use the ‘effect ref’ pattern, so the end user can always pass a flat callback, but the callback function doesn’t have to be a part of the deps array:

   function useRecoilCallback(fn) {
     const fnRef = useRef(fn)
     useEffect(() => {
       fnRef.current = fn
     })
   
     return useCallback(() => {
       // read fnRef.current instead of fn
     }, [some, deps])
   }
   

I think 1. is “more correct” and would result in less bugs both internally and for the end user, but 2. would result in better UX, since 1. would require the user to useCallback/useMemo themselves if they wanted a properly recreated callback. A note in the docs about that might help, but those are fairly easy to miss 😅

Either way, I think this change will give a better UX when working with the hooks lint rule, with less surprises in general

[acutmore]

It looks like customisation is already available:

https://github.com/facebook/react/blob/9752d31f127037e8126177b0456ab1b0547eb2db/packages/eslint-plugin-react-hooks/README.md#advanced-configuration

// .eslint.js
module.exports = {
  rules: {
    // ...
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        additionalHooks: "useRecoilCallback",
      },
    ],
  },
};

A downside is that each project will separately need to remember to add this. Having this packaged up so it’s a one line recommended eslint plugin might be less typo prone.

[jaredpalmer]

@acutmore we should just add this to getting started/installation instructions. seems totally reasonable.