Repository: facebook/react
File: packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js (JavaScript)

Code before:
        function Foo() {
          const foo = {} as any;
          useMemo(() => {
            console.log(foo);
          }, [foo]);
        }
      `,
      errors: [
        {
          message:
            "The 'foo' object makes the dependencies of useMemo Hook (at line 6) change on every render. " +
            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
          suggestions: undefined,
        },
      ],
    },
    {
      code: normalizeIndent`
        function useCustomCallback(callback, deps) {
          return useCallback(callback as any, deps)
        }
      `,
      errors: [
        {
          message:
            "React Hook useCallback has a missing dependency: 'callback'. Either include it or remove the dependency array.",
          suggestions: [
            {
              desc: 'Update the dependencies array to be: [callback]',
              output: normalizeIndent`
                function useCustomCallback(callback, deps) {
                  return useCallback(callback as any, [callback])
                }
              `,
            },
          ],
        },
      ],
    },
  ],
};

// Tests that are only valid/invalid for `@typescript-eslint/parser@4.x`
const testsTypescriptEslintParserV4 = {
  valid: [],
  invalid: [
    // TODO: Should also be invalid as part of the JS test suite i.e. be invalid with babel eslint parsers.
    // It doesn't use any explicit types but any JS is still valid TS.
    {
      code: normalizeIndent`
        function Foo({ Component }) {

Review comment (suggestion):
This should rather warn that we can't analyze the dependencies of `callback`. Using `[callback]` in the dependencies would be equivalent to not using `useCallback` at all.

Code after:
    {
      code: normalizeIndent`
        function Foo() {
          const foo = {} as any;
          useMemo(() => {
            console.log(foo);
          }, [foo]);
        }
      `,
      errors: [
        {
          message:
            "The 'foo' object makes the dependencies of useMemo Hook (at line 6) change on every render. " +
            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
          suggestions: undefined,
        },
      ],
    },
    {
      code: normalizeIndent`
        function useCustomCallback(callback, deps) {
          return useCallback(callback as any, deps)
        }
      `,
      errors: [
        {
          message:
            'React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.',
        },
      ],
    },
  ],
};

// Tests that are only valid/invalid for `@typescript-eslint/parser@4.x`
const testsTypescriptEslintParserV4 = {
  valid: [],
  invalid: [
    // TODO: Should also be invalid as part of the JS test suite i.e. be invalid with babel eslint parsers.
    // It doesn't use any explicit types but any JS is still valid TS.
    {
      code: normalizeIndent`
        function Foo({ Component }) {
          React.useEffect(() => {
            console.log(<Component />);
          }, []);
        };
      `,
      errors: [
        {
          message: