How to use eslint rule react-hooks/exhaustive-deps to warn about violations in point free function expressions

Question

In my .eslintrc I've configured the rule "react-hooks/exhaustive-deps": "error".

The linter seems to fail to warn about missing deps when hooks are used in a point free style. Here's a minimal example:

const always = input => () => input;
const useDemonstration = () => {
  const [value, setValue] = useState(0);
  const getValue = useCallback(always(value), []);
  useEffect(() => {
    setValue(previousValue => previousValue + 1);
  }, []);
  return getValue;
};

The above code violates the exhaustive deps rule: getValue is missing dependency value but the linter emits no errors.

I already know I can change always(value) to () => always(value)() to get the linter working again. I'm looking for a solution that wouldn't require changing the code I've written to get lint errors.

Whether this is intended behaviour or not I would like to have my linter error in cases like the example. Is there a linter rule or a workaround to do that?

Answer 1

You can't, ESlint is a syntax analyzer, therefore it doesn't aware of the semantics ("always returns a function").

For getting the desired behavior you need semantic analysis by introducing types-system like Flow & Typescript.