Viewing github.com/facebook/react/packages/eslint-plugin-react-hooks/__tests_

```
/**
```

 * Copyright (c) Meta Platforms, Inc. and affiliates.

```
 *
```

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

```
 */
```
```
'use strict';
```

const ESLintTester = require('eslint').RuleTester;

const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');

const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['exhaustive-deps'];

```
/**
```

 * A string template tag that removes padding from the left side of multi-line strings

 * @param {Array} strings array of code strings (only one expected)

```
 */
```
```
function normalizeIndent(strings) {
```

  const codeLines = strings[0].split('\n');

  const leftPadding = codeLines[1].match(/\s+/)[0];

  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');

```
}
```

// ***************************************************

// For easier local testing, you can add to any case:

```
// {
```
```
//   skip: true,
```
```
//   --or--
```
```
//   only: true,
```
```
//   ...
```
```
// }
```

// ***************************************************

// Tests that are valid/invalid across all parsers

```
const tests = {
```
```
  valid: [
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          });
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          useEffect(() => {
```
```
            const local = {};
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [local]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // OK because `props` wasn't defined.

      // We don't technically know if `props` is supposed

      // to be an import that hasn't been added yet, or

      // a component-level variable. Ignore it until it

      //  gets defined (a different rule would flag it anyway).

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = {};
```
```
          {
```
```
            const local2 = {};
```
```
            useEffect(() => {
```
```
              console.log(local1);
```
```
              console.log(local2);
```
```
            });
```
```
          }
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = someFunc();
```
```
          {
```
```
            const local2 = someFunc();
```
```
            useCallback(() => {
```
```
              console.log(local1);
```
```
              console.log(local2);
```
```
            }, [local1, local2]);
```
```
          }
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = someFunc();
```

          function MyNestedComponent() {

```
            const local2 = someFunc();
```
```
            useCallback(() => {
```
```
              console.log(local1);
```
```
              console.log(local2);
```
```
            }, [local2]);
```
```
          }
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
            console.log(local);
```
```
          }, [local]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          useEffect(() => {
```
```
            console.log(unresolved);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [,,,local,,,]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```

        function MyComponent({ foo }) {

```
          useEffect(() => {
```
```
            console.log(foo.length);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```

        function MyComponent({ foo }) {

```
          useEffect(() => {
```
```
            console.log(foo.length);
```
```
            console.log(foo.slice(0));
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```

        function MyComponent({ history }) {

```
          useEffect(() => {
```
```
            return history.listen();
```
```
          }, [history]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because they have meaning without deps.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {});
```
```
          useLayoutEffect(() => {});
```

          useImperativeHandle(props.innerRef, () => {});

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, [props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
          }, [props.bar, props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
          }, [props.foo, props.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
            console.log(local);
```

          }, [props.foo, props.bar, local]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // [props, props.foo] is technically unnecessary ('props' covers 'props.foo').

      // However, it's valid for effects to over-specify their deps.

      // So we don't warn about this. We *would* warn about useMemo/useCallback.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
          }, [props, props.foo]);
```
```
          let color = someFunc();
```
```
          useEffect(() => {
```

            console.log(props.foo.bar.baz);

```
            console.log(color);
```

          }, [props.foo, props.foo.bar.baz, color]);

```
        }
```
```
      `,
```
```
    },
```

    // Nullish coalescing and optional chaining

```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo?.bar?.baz ?? null);

```
          }, [props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo?.bar);

```
          }, [props.foo?.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo?.bar);

```
          }, [props.foo.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo.bar);

```
          }, [props.foo?.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo.bar);

            console.log(props.foo?.bar);

```
          }, [props.foo?.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo.bar);

            console.log(props.foo?.bar);

```
          }, [props.foo.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```

            console.log(props.foo?.bar);

```
          }, [props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo?.toString());

```
          }, [props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useMemo(() => {
```

            console.log(props.foo?.toString());

```
          }, [props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.toString());

```
          }, [props.foo]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo.bar?.toString());

```
          }, [props.foo.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.bar?.toString());

```
          }, [props.foo.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo.bar.toString());

```
          }, [props?.foo?.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.bar?.baz);

```
          }, [props?.foo.bar?.baz]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myEffect = () => {
```
```
            // Doesn't use anything
```
```
          };
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        const local = {};
```
```
        function MyComponent() {
```
```
          const myEffect = () => {
```
```
            console.log(local);
```
```
          };
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        const local = {};
```
```
        function MyComponent() {
```
```
          function myEffect() {
```
```
            console.log(local);
```
```
          }
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          function myEffect() {
```
```
            console.log(local);
```
```
          }
```

          useEffect(myEffect, [local]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          function myEffect() {
```
```
            console.log(global);
```
```
          }
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        const local = {};
```
```
        function MyComponent() {
```
```
          const myEffect = () => {
```
```
            otherThing()
```
```
          }
```
```
          const otherThing = () => {
```
```
            console.log(local);
```
```
          }
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because even though we don't inspect the function itself,

      // at least it's passed as a dependency.

```
      code: normalizeIndent`
```

        function MyComponent({delay}) {

```
          const local = {};
```

          const myEffect = debounce(() => {

```
            console.log(local);
```
```
          }, delay);
```

          useEffect(myEffect, [myEffect]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({myEffect}) {

          useEffect(myEffect, [,myEffect]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({myEffect}) {

          useEffect(myEffect, [,myEffect,,]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        let local = {};
```
```
        function myEffect() {
```
```
          console.log(local);
```
```
        }
```
```
        function MyComponent() {
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({myEffect}) {

          useEffect(myEffect, [myEffect]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      // Valid because has no deps.
```
```
      code: normalizeIndent`
```

        function MyComponent({myEffect}) {

```
          useEffect(myEffect);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCustomEffect(() => {
```
```
            console.log(props.foo);
```
```
          });
```
```
        }
```
```
      `,
```

      options: [{additionalHooks: 'useCustomEffect'}],

```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCustomEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, [props.foo]);
```
```
        }
```
```
      `,
```

      options: [{additionalHooks: 'useCustomEffect'}],

```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCustomEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```

      options: [{additionalHooks: 'useAnotherEffect'}],

```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          useWithoutEffectSuffix(() => {

```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          return renderHelperConfusedWithEffect(() => {

```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we don't care about hooks outside of components.

```
      code: normalizeIndent`
```
```
        const local = {};
```
```
        useEffect(() => {
```
```
          console.log(local);
```
```
        }, []);
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we don't care about hooks outside of components.

```
      code: normalizeIndent`
```
```
        const local1 = {};
```
```
        {
```
```
          const local2 = {};
```
```
          useEffect(() => {
```
```
            console.log(local1);
```
```
            console.log(local2);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const ref = useRef();
```
```
          useEffect(() => {
```
```
            console.log(ref.current);
```
```
          }, [ref]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const ref = useRef();
```
```
          useEffect(() => {
```
```
            console.log(ref.current);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ maybeRef2, foo }) {

          const definitelyRef1 = useRef();

          const definitelyRef2 = useRef();

          const maybeRef1 = useSomeOtherRefyThing();

          const [state1, setState1] = useState();

          const [state2, setState2] = React.useState();

          const [state3, dispatch1] = useReducer();

          const [state4, dispatch2] = React.useReducer();

          const [state5, maybeSetState] = useFunnyState();

          const [state6, maybeDispatch] = useFunnyReducer();

          const [isPending1] = useTransition();

          const [isPending2, startTransition2] = useTransition();

          const [isPending3] = React.useTransition();

          const [isPending4, startTransition4] = React.useTransition();

          const mySetState = useCallback(() => {}, []);

          let myDispatch = useCallback(() => {}, []);

```
          useEffect(() => {
```
```
            // Known to be static
```

            console.log(definitelyRef1.current);

            console.log(definitelyRef2.current);

            console.log(maybeRef1.current);

            console.log(maybeRef2.current);

```
            setState1();
```
```
            setState2();
```
```
            dispatch1();
```
```
            dispatch2();
```
```
            startTransition1();
```
```
            startTransition2();
```
```
            startTransition3();
```
```
            startTransition4();
```
```
            // Dynamic
```
```
            console.log(state1);
```
```
            console.log(state2);
```
```
            console.log(state3);
```
```
            console.log(state4);
```
```
            console.log(state5);
```
```
            console.log(state6);
```
```
            console.log(isPending2);
```
```
            console.log(isPending4);
```
```
            mySetState();
```
```
            myDispatch();
```

            // Not sure; assume dynamic

```
            maybeSetState();
```
```
            maybeDispatch();
```
```
          }, [
```
```
            // Dynamic
```

            state1, state2, state3, state4, state5, state6,

```
            maybeRef1, maybeRef2,
```
```
            isPending2, isPending4,
```

            // Not sure; assume dynamic

```
            mySetState, myDispatch,
```

            maybeSetState, maybeDispatch

            // In this test, we don't specify static deps.

```
            // That should be okay.
```
```
          ]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ maybeRef2 }) {

          const definitelyRef1 = useRef();

          const definitelyRef2 = useRef();

          const maybeRef1 = useSomeOtherRefyThing();

          const [state1, setState1] = useState();

          const [state2, setState2] = React.useState();

          const [state3, dispatch1] = useReducer();

          const [state4, dispatch2] = React.useReducer();

          const [state5, maybeSetState] = useFunnyState();

          const [state6, maybeDispatch] = useFunnyReducer();

          const mySetState = useCallback(() => {}, []);

          let myDispatch = useCallback(() => {}, []);

```
          useEffect(() => {
```
```
            // Known to be static
```

            console.log(definitelyRef1.current);

            console.log(definitelyRef2.current);

            console.log(maybeRef1.current);

            console.log(maybeRef2.current);

```
            setState1();
```
```
            setState2();
```
```
            dispatch1();
```
```
            dispatch2();
```
```
            // Dynamic
```
```
            console.log(state1);
```
```
            console.log(state2);
```
```
            console.log(state3);
```
```
            console.log(state4);
```
```
            console.log(state5);
```
```
            console.log(state6);
```
```
            mySetState();
```
```
            myDispatch();
```

            // Not sure; assume dynamic

```
            maybeSetState();
```
```
            maybeDispatch();
```
```
          }, [
```
```
            // Dynamic
```

            state1, state2, state3, state4, state5, state6,

```
            maybeRef1, maybeRef2,
```

            // Not sure; assume dynamic

```
            mySetState, myDispatch,
```

            maybeSetState, maybeDispatch,

            // In this test, we specify static deps.

            // That should be okay too!

            definitelyRef1, definitelyRef2, setState1, setState2, dispatch1, dispatch2

```
          ]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        const MyComponent = forwardRef((props, ref) => {

          useImperativeHandle(ref, () => ({

```
            focus() {
```
```
              alert(props.hello);
```
```
            }
```
```
          }))
```
```
        });
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        const MyComponent = forwardRef((props, ref) => {

          useImperativeHandle(ref, () => ({

```
            focus() {
```
```
              alert(props.hello);
```
```
            }
```
```
          }), [props.hello])
```
```
        });
```
```
      `,
```
```
    },
```
```
    {
```

      // This is not ideal but warning would likely create

      // too many false positives. We do, however, prevent

```
      // direct assignments.
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let obj = someFunc();
```
```
          useEffect(() => {
```
```
            obj.foo = true;
```
```
          }, [obj]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let foo = {}
```
```
          useEffect(() => {
```
```
            foo.bar.baz = 43;
```
```
          }, [foo.bar]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we assign ref.current

      // ourselves. Therefore it's likely not

```
      // a ref managed by React.
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```

            const handleMove = () => {};

```
            myRef.current = {};
```
```
            return () => {
```

              console.log(myRef.current.toString())

```
            };
```
```
          }, []);
```
```
          return <div />;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we assign ref.current

      // ourselves. Therefore it's likely not

```
      // a ref managed by React.
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```

            const handleMove = () => {};

```
            myRef.current = {};
```
```
            return () => {
```

              console.log(myRef?.current?.toString())

```
            };
```
```
          }, []);
```
```
          return <div />;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we assign ref.current

      // ourselves. Therefore it's likely not

```
      // a ref managed by React.
```
```
      code: normalizeIndent`
```
```
        function useMyThing(myRef) {
```
```
          useEffect(() => {
```

            const handleMove = () => {};

```
            myRef.current = {};
```
```
            return () => {
```

              console.log(myRef.current.toString())

```
            };
```
```
          }, [myRef]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because the ref is captured.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```

            const handleMove = () => {};

            const node = myRef.current;

            node.addEventListener('mousemove', handleMove);

            return () => node.removeEventListener('mousemove', handleMove);

```
          }, []);
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because the ref is captured.

```
      code: normalizeIndent`
```
```
        function useMyThing(myRef) {
```
```
          useEffect(() => {
```

            const handleMove = () => {};

            const node = myRef.current;

            node.addEventListener('mousemove', handleMove);

            return () => node.removeEventListener('mousemove', handleMove);

```
          }, [myRef]);
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because it's not an effect.

```
      code: normalizeIndent`
```
```
        function useMyThing(myRef) {
```
```
          useCallback(() => {
```

            const handleMouse = () => {};

            myRef.current.addEventListener('mousemove', handleMouse);

            myRef.current.addEventListener('mousein', handleMouse);

```
            return function() {
```
```
              setTimeout(() => {
```

                myRef.current.removeEventListener('mousemove', handleMouse);

                myRef.current.removeEventListener('mousein', handleMouse);

```
              });
```
```
            }
```
```
          }, [myRef]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we read ref.current in a function that isn't cleanup.

```
      code: normalizeIndent`
```
```
        function useMyThing() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```
```
            const handleMove = () => {
```

              console.log(myRef.current)

```
            };
```

            window.addEventListener('mousemove', handleMove);

            return () => window.removeEventListener('mousemove', handleMove);

```
          }, []);
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because we read ref.current in a function that isn't cleanup.

```
      code: normalizeIndent`
```
```
        function useMyThing() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```
```
            const handleMove = () => {
```

              return () => window.removeEventListener('mousemove', handleMove);

```
            };
```

            window.addEventListener('mousemove', handleMove);

```
            return () => {};
```
```
          }, []);
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid because it's a primitive constant.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = 42;
```
```
          const local2 = '42';
```
```
          const local3 = null;
```
```
          useEffect(() => {
```
```
            console.log(local1);
```
```
            console.log(local2);
```
```
            console.log(local3);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // It's not a mistake to specify constant values though.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = 42;
```
```
          const local2 = '42';
```
```
          const local3 = null;
```
```
          useEffect(() => {
```
```
            console.log(local1);
```
```
            console.log(local2);
```
```
            console.log(local3);
```

          }, [local1, local2, local3]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // It is valid for effects to over-specify their deps.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = props.local;
```

          useEffect(() => {}, [local]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Valid even though activeTab is "unused".

      // We allow over-specifying deps for effects, but not callbacks or memo.

```
      code: normalizeIndent`
```
```
        function Foo({ activeTab }) {
```
```
          useEffect(() => {
```
```
            window.scrollTo(0, 0);
```
```
          }, [activeTab]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // It is valid to specify broader effect deps than strictly necessary.

```
      // Don't warn for this.
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.foo.bar.baz);

```
          }, [props]);
```
```
          useEffect(() => {
```

            console.log(props.foo.bar.baz);

```
          }, [props.foo]);
```
```
          useEffect(() => {
```

            console.log(props.foo.bar.baz);

```
          }, [props.foo.bar]);
```
```
          useEffect(() => {
```

            console.log(props.foo.bar.baz);

```
          }, [props.foo.bar.baz]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // It is *also* valid to specify broader memo/callback deps than strictly necessary.

```
      // Don't warn for this either.
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const fn = useCallback(() => {

            console.log(props.foo.bar.baz);

```
          }, [props]);
```

          const fn2 = useCallback(() => {

            console.log(props.foo.bar.baz);

```
          }, [props.foo]);
```
```
          const fn3 = useMemo(() => {
```

            console.log(props.foo.bar.baz);

```
          }, [props.foo.bar]);
```
```
          const fn4 = useMemo(() => {
```

            console.log(props.foo.bar.baz);

```
          }, [props.foo.bar.baz]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Declaring handleNext is optional because

      // it doesn't use anything in the function scope.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          function handleNext1() {
```
```
            console.log('hello');
```
```
          }
```
```
          const handleNext2 = () => {
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function() {

```
            console.log('hello');
```
```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

```
          }, []);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext2);

```
          }, []);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext3);

```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Declaring handleNext is optional because

      // it doesn't use anything in the function scope.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          function handleNext() {
```
```
            console.log('hello');
```
```
          }
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, []);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, []);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext);

```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```

      // Declaring handleNext is optional because

      // everything they use is fully static.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

          let [, dispatch] = React.useReducer();

          function handleNext1(value) {

```
            let value2 = value * 100;
```
```
            setState(value2);
```
```
            console.log('hello');
```
```
          }
```

          const handleNext2 = (value) => {

```
            setState(foo(value));
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function(value) {

```
            console.log(value);
```

            dispatch({ type: 'x', value });

```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

```
          }, []);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext2);

```
          }, []);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext3);

```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function useInterval(callback, delay) {

          const savedCallback = useRef();

```
          useEffect(() => {
```

            savedCallback.current = callback;

```
          });
```
```
          useEffect(() => {
```
```
            function tick() {
```
```
              savedCallback.current();
```
```
            }
```
```
            if (delay !== null) {
```

              let id = setInterval(tick, delay);

              return () => clearInterval(id);

```
            }
```
```
          }, [delay]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          const [count, setCount] = useState(0);

```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              setCount(c => c + 1);
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Counter(unstableProp) {

          let [count, setCount] = useState(0);

```
          setCount = unstableProp
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              setCount(c => c + 1);
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, [setCount]);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          const [count, setCount] = useState(0);

```
          function tick() {
```
```
            setCount(c => c + 1);
```
```
          }
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              tick();
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          const [count, dispatch] = useReducer((state, action) => {

```
            if (action === 'inc') {
```
```
              return state + 1;
```
```
            }
```
```
          }, 0);
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              dispatch('inc');
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          const [count, dispatch] = useReducer((state, action) => {

```
            if (action === 'inc') {
```
```
              return state + 1;
```
```
            }
```
```
          }, 0);
```
```
          const tick = () => {
```
```
            dispatch('inc');
```
```
          };
```
```
          useEffect(() => {
```

            let id = setInterval(tick, 1000);

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      // Regression test for a crash
```
```
      code: normalizeIndent`
```
```
        function Podcasts() {
```
```
          useEffect(() => {
```
```
            setPodcasts([]);
```
```
          }, []);
```

          let [podcasts, setPodcasts] = useState(null);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function withFetch(fetchPodcasts) {

          return function Podcasts({ id }) {

            let [podcasts, setPodcasts] = useState(null);

```
            useEffect(() => {
```

              fetchPodcasts(id).then(setPodcasts);

```
            }, [id]);
```
```
          }
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Podcasts({ id }) {
```

          let [podcasts, setPodcasts] = useState(null);

```
          useEffect(() => {
```

            function doFetch({ fetchPodcasts }) {

              fetchPodcasts(id).then(setPodcasts);

```
            }
```

            doFetch({ fetchPodcasts: API.fetchPodcasts });

```
          }, [id]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          let [count, setCount] = useState(0);

```
          function increment(x) {
```
```
            return x + 1;
```
```
          }
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              setCount(increment);
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          let [count, setCount] = useState(0);

```
          function increment(x) {
```
```
            return x + 1;
```
```
          }
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => increment(count));

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        import increment from './increment';

```
        function Counter() {
```

          let [count, setCount] = useState(0);

```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => count + increment);

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function withStuff(increment) {

```
          return function Counter() {
```

            let [count, setCount] = useState(0);

```
            useEffect(() => {
```

              let id = setInterval(() => {

                setCount(count => count + increment);

```
              }, 1000);
```

              return () => clearInterval(id);

```
            }, []);
```
```
            return <h1>{count}</h1>;
```
```
          }
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function App() {
```

          const [query, setQuery] = useState('react');

          const [state, setState] = useState(null);

```
          useEffect(() => {
```
```
            let ignore = false;
```
```
            fetchSomething();
```

            async function fetchSomething() {

              const result = await (await fetch('http://hn.algolia.com/api/v1/search?query=' + query)).json();

              if (!ignore) setState(result);

```
            }
```

            return () => { ignore = true; };

```
          }, [query]);
```
```
          return (
```
```
            <>
```

              <input value={query} onChange={e => setQuery(e.target.value)} />

```
              {JSON.stringify(state)}
```
```
            </>
```
```
          );
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example() {
```

          const foo = useCallback(() => {

```
            foo();
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example({ prop }) {
```

          const foo = useCallback(() => {

```
            if (prop) {
```
```
              foo();
```
```
            }
```
```
          }, [prop]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Hello() {
```

          const [state, setState] = useState(0);

```
          useEffect(() => {
```

            const handleResize = () => setState(window.innerWidth);

            window.addEventListener('resize', handleResize);

            return () => window.removeEventListener('resize', handleResize);

```
          });
```
```
        }
```
```
      `,
```
```
    },
```

    // Ignore arguments keyword for arrow functions.

```
    {
```
```
      code: normalizeIndent`
```
```
        function Example() {
```
```
          useEffect(() => {
```
```
            arguments
```
```
          }, [])
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example() {
```
```
          useEffect(() => {
```
```
            const bar = () => {
```
```
              arguments;
```
```
            };
```
```
            bar();
```
```
          }, [])
```
```
        }
```
```
      `,
```
```
    },
```
```
    // Regression test.
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example(props) {
```
```
          useEffect(() => {
```
```
            let topHeight = 0;
```

            topHeight = props.upperViewHeight;

```
          }, [props.upperViewHeight]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    // Regression test.
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example(props) {
```
```
          useEffect(() => {
```
```
            let topHeight = 0;
```

            topHeight = props?.upperViewHeight;

          }, [props?.upperViewHeight]);

```
        }
```
```
      `,
```
```
    },
```
```
    // Regression test.
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example(props) {
```
```
          useEffect(() => {
```
```
            let topHeight = 0;
```

            topHeight = props?.upperViewHeight;

```
          }, [props]);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useFoo(foo){
```

          return useMemo(() => foo, [foo]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useFoo(){
```
```
          const foo = "hi!";
```

          return useMemo(() => foo, [foo]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useFoo(){
```
```
          let {foo} = {foo: 1};
```

          return useMemo(() => foo, [foo]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useFoo(){
```
```
          let [foo] = [1];
```

          return useMemo(() => foo, [foo]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useFoo() {
```
```
          const foo = "fine";
```
```
          if (true) {
```

            // Shadowed variable with constant construction in a nested scope is fine.

```
            const foo = {};
```
```
          }
```

          return useMemo(() => foo, [foo]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent({foo}) {
```

          return useMemo(() => foo, [foo])

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          const foo = true ? "fine" : "also fine";

          return useMemo(() => foo, [foo]);

```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          useEffect(() => {
```

            console.log('banana banana banana');

```
          }, undefined);
```
```
        }
```
```
      `,
```
```
    },
```
```
  ],
```
```
  invalid: [
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.toString());

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useCallback(() => {
```

                    console.log(props.foo?.toString());

```
                  }, [props.foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.bar.baz);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo?.bar.baz'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo?.bar.baz]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useCallback(() => {
```

                    console.log(props.foo?.bar.baz);

                  }, [props.foo?.bar.baz]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.bar?.baz);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo?.bar?.baz'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo?.bar?.baz]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useCallback(() => {
```

                    console.log(props.foo?.bar?.baz);

                  }, [props.foo?.bar?.baz]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCallback(() => {
```

            console.log(props.foo?.bar.toString());

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo?.bar'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo?.bar]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useCallback(() => {
```

                    console.log(props.foo?.bar.toString());

                  }, [props.foo?.bar]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local = someFunc();

```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Counter(unstableProp) {

          let [count, setCount] = useState(0);

```
          setCount = unstableProp
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              setCount(c => c + 1);
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'setCount'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [setCount]',

```
              output: normalizeIndent`
```

                function Counter(unstableProp) {

                  let [count, setCount] = useState(0);

                  setCount = unstableProp

```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(c => c + 1);

```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [setCount]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Note: we *could* detect it's a primitive and never assigned

      // even though it's not a constant -- but we currently don't.

```
      // So this is an error.
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          let local = 42;
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  let local = 42;
```
```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Regexes are literals but potentially stateful.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = /foo/;
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = /foo/;
```
```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Invalid because they don't have a meaning without deps.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const value = useMemo(() => { return 2*2; });

          const fn = useCallback(() => { alert('foo'); });

```
        }
```
```
      `,
```
```
      // We don't know what you meant.
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useMemo does nothing when called with only one argument. ' +

            'Did you forget to pass an array of dependencies?',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useCallback does nothing when called with only one argument. ' +

            'Did you forget to pass an array of dependencies?',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Invalid because they don't have a meaning without deps.

```
      code: normalizeIndent`
```

        function MyComponent({ fn1, fn2 }) {

```
          const value = useMemo(fn1);
```
```
          const fn = useCallback(fn2);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useMemo does nothing when called with only one argument. ' +

            'Did you forget to pass an array of dependencies?',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useCallback does nothing when called with only one argument. ' +

            'Did you forget to pass an array of dependencies?',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          useEffect()
```
```
          useLayoutEffect()
```
```
          useCallback()
```
```
          useMemo()
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect requires an effect callback. ' +

            'Did you forget to pass a callback to the hook?',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useLayoutEffect requires an effect callback. ' +

            'Did you forget to pass a callback to the hook?',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useCallback requires an effect callback. ' +

            'Did you forget to pass a callback to the hook?',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useMemo requires an effect callback. ' +

            'Did you forget to pass a callback to the hook?',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            if (true) {
```
```
              console.log(local);
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local = someFunc();

```
                  useEffect(() => {
```
```
                    if (true) {
```

                      console.log(local);

```
                    }
```
```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            try {
```
```
              console.log(local);
```
```
            } finally {}
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```
```
                    try {
```

                      console.log(local);

```
                    } finally {}
```
```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            function inner() {
```
```
              console.log(local);
```
```
            }
```
```
            inner();
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```
```
                    function inner() {
```

                      console.log(local);

```
                    }
```
```
                    inner();
```
```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = someFunc();
```
```
          {
```
```
            const local2 = someFunc();
```
```
            useEffect(() => {
```
```
              console.log(local1);
```
```
              console.log(local2);
```
```
            }, []);
```
```
          }
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'local1' and 'local2'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local1, local2]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local1 = someFunc();

```
                  {
```

                    const local2 = someFunc();

```
                    useEffect(() => {
```

                      console.log(local1);

                      console.log(local2);

                    }, [local1, local2]);

```
                  }
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = {};
```
```
          const local2 = {};
```
```
          useEffect(() => {
```
```
            console.log(local1);
```
```
            console.log(local2);
```
```
          }, [local1]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local2'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local1, local2]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local1 = {};
```
```
                  const local2 = {};
```
```
                  useEffect(() => {
```

                    console.log(local1);

                    console.log(local2);

                  }, [local1, local2]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = {};
```
```
          const local2 = {};
```
```
          useMemo(() => {
```
```
            console.log(local1);
```
```
          }, [local1, local2]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useMemo has an unnecessary dependency: 'local2'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local1]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local1 = {};
```
```
                  const local2 = {};
```
```
                  useMemo(() => {
```

                    console.log(local1);

```
                  }, [local1]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = someFunc();
```

          function MyNestedComponent() {

```
            const local2 = {};
```
```
            useCallback(() => {
```
```
              console.log(local1);
```
```
              console.log(local2);
```
```
            }, [local1]);
```
```
          }
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'local2'. " +

            'Either include it or remove the dependency array. ' +

            "Outer scope values like 'local1' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local2]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local1 = someFunc();

                  function MyNestedComponent() {

```
                    const local2 = {};
```

                    useCallback(() => {

                      console.log(local1);

                      console.log(local2);

```
                    }, [local2]);
```
```
                  }
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(local);

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
            console.log(local);
```
```
          }, [local, local]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a duplicate dependency: 'local'. " +

            'Either omit it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(local);

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          useCallback(() => {}, [window]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'window'. " +

            'Either exclude it or remove the dependency array. ' +

            "Outer scope values like 'window' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  useCallback(() => {}, []);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // It is not valid for useCallback to specify extraneous deps

      // because it doesn't serve as a side effect trigger unlike useEffect.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let local = props.foo;
```

          useCallback(() => {}, [local]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'local'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let local = props.foo;

                  useCallback(() => {}, []);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ history }) {

```
          useEffect(() => {
```
```
            return history.listen();
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'history'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [history]',

```
              output: normalizeIndent`
```

                function MyComponent({ history }) {

```
                  useEffect(() => {
```

                    return history.listen();

```
                  }, [history]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ history }) {

```
          useEffect(() => {
```
```
            return [
```

              history.foo.bar[2].dobedo.listen(),

              history.foo.bar().dobedo.listen[2]

```
            ];
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'history.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [history.foo]',

```
              output: normalizeIndent`
```

                function MyComponent({ history }) {

```
                  useEffect(() => {
```
```
                    return [
```

                      history.foo.bar[2].dobedo.listen(),

                      history.foo.bar().dobedo.listen[2]

```
                    ];
```
```
                  }, [history.foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ history }) {

```
          useEffect(() => {
```
```
            return [
```
```
              history?.foo
```
```
            ];
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'history?.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [history?.foo]',

```
              output: normalizeIndent`
```

                function MyComponent({ history }) {

```
                  useEffect(() => {
```
```
                    return [
```
```
                      history?.foo
```
```
                    ];
```
```
                  }, [history?.foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          useEffect(() => {}, ['foo']);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            // Don't assume user meant `foo` because it's not used in the effect.

            "The 'foo' literal is not a valid dependency because it never changes. " +

            'You can safely remove it.',

```
          // TODO: provide suggestion.
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ foo, bar, baz }) {

```
          useEffect(() => {
```

            console.log(foo, bar, baz);

```
          }, ['foo', 'bar']);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [bar, baz, foo]',

```
              output: normalizeIndent`
```

                function MyComponent({ foo, bar, baz }) {

```
                  useEffect(() => {
```

                    console.log(foo, bar, baz);

```
                  }, [bar, baz, foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'foo' literal is not a valid dependency because it never changes. " +

            'Did you mean to include foo in the array instead?',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'bar' literal is not a valid dependency because it never changes. " +

            'Did you mean to include bar in the array instead?',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ foo, bar, baz }) {

```
          useEffect(() => {
```

            console.log(foo, bar, baz);

```
          }, [42, false, null]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [bar, baz, foo]',

```
              output: normalizeIndent`
```

                function MyComponent({ foo, bar, baz }) {

```
                  useEffect(() => {
```

                    console.log(foo, bar, baz);

```
                  }, [bar, baz, foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'The 42 literal is not a valid dependency because it never changes. You can safely remove it.',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'The false literal is not a valid dependency because it never changes. You can safely remove it.',

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            'The null literal is not a valid dependency because it never changes. You can safely remove it.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const dependencies = [];
```

          useEffect(() => {}, dependencies);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect was passed a dependency list that is not an ' +

            "array literal. This means we can't statically verify whether you've " +

            'passed the correct dependencies.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```

          const dependencies = [local];

```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, dependencies);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect was passed a dependency list that is not an ' +

            "array literal. This means we can't statically verify whether you've " +

            'passed the correct dependencies.',

          // TODO: should this autofix or bail out?

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const dependencies = [local];

```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```

          const dependencies = [local];

```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [...dependencies]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const dependencies = [local];

```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a spread element in its dependency array. ' +

            "This means we can't statically verify whether you've passed the " +

```
            'correct dependencies.',
```

          // TODO: should this autofix or bail out?

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = someFunc();
```
```
          useEffect(() => {
```
```
            console.log(local);
```

          }, [local, ...dependencies]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a spread element in its dependency array. ' +

            "This means we can't statically verify whether you've passed the " +

```
            'correct dependencies.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```

          }, [computeCacheKey(local)]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

          // TODO: I'm not sure this is a good idea.

```
          // Maybe bail out?
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.items[0]);

```
          }, [props.items[0]]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props.items'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.items]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.items[0]);

```
                  }, [props.items]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```

            console.log(props.items[0]);

          }, [props.items, props.items[0]]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

          // TODO: ideally suggestion would remove the bad expression?

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ items }) {

```
          useEffect(() => {
```
```
            console.log(items[0]);
```
```
          }, [items[0]]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'items'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [items]',

```
              output: normalizeIndent`
```

                function MyComponent({ items }) {

```
                  useEffect(() => {
```

                    console.log(items[0]);

```
                  }, [items]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ items }) {

```
          useEffect(() => {
```
```
            console.log(items[0]);
```
```
          }, [items, items[0]]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

          // TODO: ideally suggeston would remove the bad expression?

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // It is not valid for useCallback to specify extraneous deps

      // because it doesn't serve as a side effect trigger unlike useEffect.

      // However, we generally allow specifying *broader* deps as escape hatch.

      // So while [props, props.foo] is unnecessary, 'props' wins here as the

      // broader one, and this is why 'props.foo' is reported as unnecessary.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = {};
```
```
          useCallback(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
          }, [props, props.foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'props.foo'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  const local = {};
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

                    console.log(props.bar);

```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Since we don't have 'props' in the list, we'll suggest narrow dependencies.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = {};
```
```
          useCallback(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has missing dependencies: 'props.bar' and 'props.foo'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.bar, props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  const local = {};
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

                    console.log(props.bar);

                  }, [props.bar, props.foo]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Effects are allowed to over-specify deps. We'll complain about missing

      // 'local', but we won't remove the already-specified 'local.id' from your list.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {id: 42};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [local.id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local, local.id]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local = {id: 42};

```
                  useEffect(() => {
```

                    console.log(local);

                  }, [local, local.id]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Callbacks are not allowed to over-specify deps. So we'll complain about missing

      // 'local' and we will also *remove* 'local.id' from your list.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {id: 42};
```

          const fn = useCallback(() => {

```
            console.log(local);
```
```
          }, [local.id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local = {id: 42};

                  const fn = useCallback(() => {

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Callbacks are not allowed to over-specify deps. So we'll complain about

```
      // the unnecessary 'local.id'.
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {id: 42};
```

          const fn = useCallback(() => {

```
            console.log(local);
```
```
          }, [local.id, local]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'local.id'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local = {id: 42};

                  const fn = useCallback(() => {

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const fn = useCallback(() => {

            console.log(props.foo.bar.baz);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo.bar.baz]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const fn = useCallback(() => {

                    console.log(props.foo.bar.baz);

                  }, [props.foo.bar.baz]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let color = {}
```

          const fn = useCallback(() => {

            console.log(props.foo.bar.baz);

```
            console.log(color);
```

          }, [props.foo, props.foo.bar.baz]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'color'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [color, props.foo.bar.baz]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  let color = {}
```

                  const fn = useCallback(() => {

                    console.log(props.foo.bar.baz);

                    console.log(color);

                  }, [color, props.foo.bar.baz]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Callbacks are not allowed to over-specify deps. So one of these is extra.

      // However, it *is* allowed to specify broader deps then strictly necessary.

      // So in this case we ask you to remove 'props.foo.bar.baz' because 'props.foo'

      // already covers it, and having both is unnecessary.

      // TODO: maybe consider suggesting a narrower one by default in these cases.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const fn = useCallback(() => {

            console.log(props.foo.bar.baz);

          }, [props.foo.bar.baz, props.foo]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'props.foo.bar.baz'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const fn = useCallback(() => {

                    console.log(props.foo.bar.baz);

```
                  }, [props.foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const fn = useCallback(() => {

            console.log(props.foo.bar.baz);

            console.log(props.foo.fizz.bizz);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has missing dependencies: 'props.foo.bar.baz' and 'props.foo.fizz.bizz'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo.bar.baz, props.foo.fizz.bizz]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const fn = useCallback(() => {

                    console.log(props.foo.bar.baz);

                    console.log(props.foo.fizz.bizz);

                  }, [props.foo.bar.baz, props.foo.fizz.bizz]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Normally we allow specifying deps too broadly.

      // So we'd be okay if 'props.foo.bar' was there rather than 'props.foo.bar.baz'.

      // However, 'props.foo.bar.baz' is missing. So we know there is a mistake.

      // When we're sure there is a mistake, for callbacks we will rebuild the list

      // from scratch. This will set the user on a better path by default.

      // This is why we end up with just 'props.foo.bar', and not them both.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const fn = useCallback(() => {

            console.log(props.foo.bar);

```
          }, [props.foo.bar.baz]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo.bar'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo.bar]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const fn = useCallback(() => {

                    console.log(props.foo.bar);

```
                  }, [props.foo.bar]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const fn = useCallback(() => {

```
            console.log(props);
```
```
            console.log(props.hello);
```
```
          }, [props.foo.bar.baz]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const fn = useCallback(() => {

                    console.log(props);

                    console.log(props.hello);

```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [local, local]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a duplicate dependency: 'local'. " +

            'Either omit it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = {};
```
```
          useCallback(() => {
```
```
            const local1 = {};
```
```
            console.log(local1);
```
```
          }, [local1]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'local1'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local1 = {};
```
```
                  useCallback(() => {
```
```
                    const local1 = {};
```

                    console.log(local1);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = {};
```

          useCallback(() => {}, [local1]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'local1'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local1 = {};
```

                  useCallback(() => {}, []);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, [props.foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'props.bar' and 'props.foo'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.bar, props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

                    console.log(props.bar);

                  }, [props.bar, props.foo]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let a, b, c, d, e, f, g;
```
```
          useEffect(() => {
```

            console.log(b, e, d, c, a, g, f);

```
          }, [c, a, g]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +

            'Either include them or remove the dependency array.',

          // Don't alphabetize if it wasn't alphabetized in the first place.

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [c, a, g, b, e, d, f]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let a, b, c, d, e, f, g;

```
                  useEffect(() => {
```

                    console.log(b, e, d, c, a, g, f);

                  }, [c, a, g, b, e, d, f]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let a, b, c, d, e, f, g;
```
```
          useEffect(() => {
```

            console.log(b, e, d, c, a, g, f);

```
          }, [a, c, g]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +

            'Either include them or remove the dependency array.',

          // Alphabetize if it was alphabetized.

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [a, b, c, d, e, f, g]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let a, b, c, d, e, f, g;

```
                  useEffect(() => {
```

                    console.log(b, e, d, c, a, g, f);

                  }, [a, b, c, d, e, f, g]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let a, b, c, d, e, f, g;
```
```
          useEffect(() => {
```

            console.log(b, e, d, c, a, g, f);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'a', 'b', 'c', 'd', 'e', 'f', and 'g'. " +

            'Either include them or remove the dependency array.',

          // Alphabetize if it was empty.

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [a, b, c, d, e, f, g]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let a, b, c, d, e, f, g;

```
                  useEffect(() => {
```

                    console.log(b, e, d, c, a, g, f);

                  }, [a, b, c, d, e, f, g]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'local', 'props.bar', and 'props.foo'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local, props.bar, props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(props.foo);

                    console.log(props.bar);

                    console.log(local);

                  }, [local, props.bar, props.foo]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
            console.log(props.bar);
```
```
            console.log(local);
```
```
          }, [props]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local, props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(props.foo);

                    console.log(props.bar);

                    console.log(local);

```
                  }, [local, props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          useCallback(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          useMemo(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          React.useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          React.useCallback(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          React.useMemo(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```

          React.notReactiveHook(() => {

```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, [props.foo]);
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCallback(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useMemo(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.notReactiveHook(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

```
                  }, [props.foo]);
```
```
                  useMemo(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCallback(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useMemo(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.notReactiveHook(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useMemo has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    console.log(props.foo);

```
                  }, [props.foo]);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCallback(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useMemo(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.notReactiveHook(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook React.useEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, [props.foo]);
```

                  React.useCallback(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useMemo(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.notReactiveHook(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook React.useCallback has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCallback(() => {

                    console.log(props.foo);

```
                  }, [props.foo]);
```

                  React.useMemo(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.notReactiveHook(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook React.useMemo has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useCallback(() => {
```

                    console.log(props.foo);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCallback(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useMemo(() => {

                    console.log(props.foo);

```
                  }, [props.foo]);
```

                  React.notReactiveHook(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useCustomEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```
```
          React.useEffect(() => {
```
```
            console.log(props.foo);
```
```
          }, []);
```

          React.useCustomEffect(() => {

```
            console.log(props.foo);
```
```
          }, []);
```
```
        }
```
```
      `,
```

      options: [{additionalHooks: 'useCustomEffect'}],

```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCustomEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  useCustomEffect(() => {

                    console.log(props.foo);

```
                  }, [props.foo]);
```
```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCustomEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  useCustomEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, [props.foo]);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```

                  React.useCustomEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook React.useEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  useCustomEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                  useEffect(() => {
```

                    console.log(props.foo);

```
                  }, []);
```

                  React.useEffect(() => {

                    console.log(props.foo);

```
                  }, [props.foo]);
```

                  React.useCustomEffect(() => {

                    console.log(props.foo);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [a ? local : b]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

          // TODO: should we bail out instead?

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [a && local]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

          // TODO: should we bail out instead?

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```
```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          useEffect(() => {}, [props?.attribute.method()]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          useEffect(() => {}, [props.method()]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has a complex expression in the dependency array. ' +

            'Extract it to a separate variable so it can be statically checked.',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const ref = useRef();
```

          const [state, setState] = useState();

```
          useEffect(() => {
```
```
            ref.current = {};
```
```
            setState(state + 1);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'state'. " +

            'Either include it or remove the dependency array. ' +

            `You can also do a functional update 'setState(s => ...)' ` +

            `if you only need 'state' in the 'setState' call.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [state]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const ref = useRef();

                  const [state, setState] = useState();

```
                  useEffect(() => {
```
```
                    ref.current = {};
```

                    setState(state + 1);

```
                  }, [state]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const ref = useRef();
```

          const [state, setState] = useState();

```
          useEffect(() => {
```
```
            ref.current = {};
```
```
            setState(state + 1);
```
```
          }, [ref]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'state'. " +

            'Either include it or remove the dependency array. ' +

            `You can also do a functional update 'setState(s => ...)' ` +

            `if you only need 'state' in the 'setState' call.`,

          // We don't ask to remove static deps but don't add them either.

          // Don't suggest removing "ref" (it's fine either way)

          // but *do* add "state". *Don't* add "setState" ourselves.

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [ref, state]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const ref = useRef();

                  const [state, setState] = useState();

```
                  useEffect(() => {
```
```
                    ref.current = {};
```

                    setState(state + 1);

```
                  }, [ref, state]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const ref1 = useRef();
```
```
          const ref2 = useRef();
```
```
          useEffect(() => {
```
```
            ref1.current.focus();
```

            console.log(ref2.current.textContent);

            alert(props.someOtherRefs.current.innerHTML);

```
            fetch(props.color);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'props.color' and 'props.someOtherRefs'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.color, props.someOtherRefs]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const ref1 = useRef();

                  const ref2 = useRef();

```
                  useEffect(() => {
```

                    ref1.current.focus();

                    console.log(ref2.current.textContent);

                    alert(props.someOtherRefs.current.innerHTML);

                    fetch(props.color);

                  }, [props.color, props.someOtherRefs]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const ref1 = useRef();
```
```
          const ref2 = useRef();
```
```
          useEffect(() => {
```
```
            ref1.current.focus();
```

            console.log(ref2.current.textContent);

            alert(props.someOtherRefs.current.innerHTML);

```
            fetch(props.color);
```

          }, [ref1.current, ref2.current, props.someOtherRefs, props.color]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +

            'Either exclude them or remove the dependency array. ' +

            "Mutable values like 'ref1.current' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.someOtherRefs, props.color]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const ref1 = useRef();

                  const ref2 = useRef();

```
                  useEffect(() => {
```

                    ref1.current.focus();

                    console.log(ref2.current.textContent);

                    alert(props.someOtherRefs.current.innerHTML);

                    fetch(props.color);

                  }, [props.someOtherRefs, props.color]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const ref1 = useRef();
```
```
          const ref2 = useRef();
```
```
          useEffect(() => {
```
```
            ref1?.current?.focus();
```

            console.log(ref2?.current?.textContent);

            alert(props.someOtherRefs.current.innerHTML);

```
            fetch(props.color);
```

          }, [ref1?.current, ref2?.current, props.someOtherRefs, props.color]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +

            'Either exclude them or remove the dependency array. ' +

            "Mutable values like 'ref1.current' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.someOtherRefs, props.color]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const ref1 = useRef();

                  const ref2 = useRef();

```
                  useEffect(() => {
```

                    ref1?.current?.focus();

                    console.log(ref2?.current?.textContent);

                    alert(props.someOtherRefs.current.innerHTML);

                    fetch(props.color);

                  }, [props.someOtherRefs, props.color]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const ref = useRef();
```
```
          useEffect(() => {
```
```
            console.log(ref.current);
```
```
          }, [ref.current]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +

            'Either exclude it or remove the dependency array. ' +

            "Mutable values like 'ref.current' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const ref = useRef();

```
                  useEffect(() => {
```

                    console.log(ref.current);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ activeTab }) {

```
          const ref1 = useRef();
```
```
          const ref2 = useRef();
```
```
          useEffect(() => {
```

            ref1.current.scrollTop = 0;

            ref2.current.scrollTop = 0;

          }, [ref1.current, ref2.current, activeTab]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +

            'Either exclude them or remove the dependency array. ' +

            "Mutable values like 'ref1.current' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [activeTab]',

```
              output: normalizeIndent`
```

                function MyComponent({ activeTab }) {

                  const ref1 = useRef();

                  const ref2 = useRef();

```
                  useEffect(() => {
```

                    ref1.current.scrollTop = 0;

                    ref2.current.scrollTop = 0;

```
                  }, [activeTab]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ activeTab, initY }) {

```
          const ref1 = useRef();
```
```
          const ref2 = useRef();
```

          const fn = useCallback(() => {

            ref1.current.scrollTop = initY;

            ref2.current.scrollTop = initY;

          }, [ref1.current, ref2.current, activeTab, initY]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has unnecessary dependencies: 'activeTab', 'ref1.current', and 'ref2.current'. " +

            'Either exclude them or remove the dependency array. ' +

            "Mutable values like 'ref1.current' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [initY]',

```
              output: normalizeIndent`
```

                function MyComponent({ activeTab, initY }) {

                  const ref1 = useRef();

                  const ref2 = useRef();

                  const fn = useCallback(() => {

                    ref1.current.scrollTop = initY;

                    ref2.current.scrollTop = initY;

```
                  }, [initY]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const ref = useRef();
```
```
          useEffect(() => {
```
```
            console.log(ref.current);
```
```
          }, [ref.current, ref]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +

            'Either exclude it or remove the dependency array. ' +

            "Mutable values like 'ref.current' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [ref]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const ref = useRef();

```
                  useEffect(() => {
```

                    console.log(ref.current);

```
                  }, [ref]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        const MyComponent = forwardRef((props, ref) => {

          useImperativeHandle(ref, () => ({

```
            focus() {
```
```
              alert(props.hello);
```
```
            }
```
```
          }), [])
```
```
        });
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useImperativeHandle has a missing dependency: 'props.hello'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.hello]',

```
              output: normalizeIndent`
```

                const MyComponent = forwardRef((props, ref) => {

                  useImperativeHandle(ref, () => ({

```
                    focus() {
```

                      alert(props.hello);

```
                    }
```
```
                  }), [props.hello])
```
```
                });
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            if (props.onChange) {
```
```
              props.onChange();
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array. ' +

            `However, 'props' will change when *any* prop changes, so the ` +

            `preferred fix is to destructure the 'props' object outside ` +

            `of the useEffect call and refer to those specific ` +

```
            `props inside useEffect.`,
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    if (props.onChange) {

                      props.onChange();

```
                    }
```
```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            if (props?.onChange) {
```
```
              props?.onChange();
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array. ' +

            `However, 'props' will change when *any* prop changes, so the ` +

            `preferred fix is to destructure the 'props' object outside ` +

            `of the useEffect call and refer to those specific ` +

```
            `props inside useEffect.`,
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    if (props?.onChange) {

                      props?.onChange();

```
                    }
```
```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            function play() {
```
```
              props.onPlay();
```
```
            }
```
```
            function pause() {
```
```
              props.onPause();
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array. ' +

            `However, 'props' will change when *any* prop changes, so the ` +

            `preferred fix is to destructure the 'props' object outside ` +

            `of the useEffect call and refer to those specific ` +

```
            `props inside useEffect.`,
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```
```
                    function play() {
```
```
                      props.onPlay();
```
```
                    }
```
```
                    function pause() {
```
```
                      props.onPause();
```
```
                    }
```
```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            if (props.foo.onChange) {
```
```
              props.foo.onChange();
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props.foo'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    if (props.foo.onChange) {

                      props.foo.onChange();

```
                    }
```
```
                  }, [props.foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            props.onChange();
```
```
            if (props.foo.onChange) {
```
```
              props.foo.onChange();
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array. ' +

            `However, 'props' will change when *any* prop changes, so the ` +

            `preferred fix is to destructure the 'props' object outside ` +

            `of the useEffect call and refer to those specific ` +

```
            `props inside useEffect.`,
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```
```
                    props.onChange();
```

                    if (props.foo.onChange) {

                      props.foo.onChange();

```
                    }
```
```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const [skillsCount] = useState();

```
          useEffect(() => {
```

            if (skillsCount === 0 && !props.isEditMode) {

```
              props.toggleEditMode();
```
```
            }
```

          }, [skillsCount, props.isEditMode, props.toggleEditMode]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array. ' +

            `However, 'props' will change when *any* prop changes, so the ` +

            `preferred fix is to destructure the 'props' object outside ` +

            `of the useEffect call and refer to those specific ` +

```
            `props inside useEffect.`,
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [skillsCount, props.isEditMode, props.toggleEditMode, props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const [skillsCount] = useState();

```
                  useEffect(() => {
```

                    if (skillsCount === 0 && !props.isEditMode) {

                      props.toggleEditMode();

```
                    }
```

                  }, [skillsCount, props.isEditMode, props.toggleEditMode, props]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          const [skillsCount] = useState();

```
          useEffect(() => {
```

            if (skillsCount === 0 && !props.isEditMode) {

```
              props.toggleEditMode();
```
```
            }
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'props' and 'skillsCount'. " +

            'Either include them or remove the dependency array. ' +

            `However, 'props' will change when *any* prop changes, so the ` +

            `preferred fix is to destructure the 'props' object outside ` +

            `of the useEffect call and refer to those specific ` +

```
            `props inside useEffect.`,
```
```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props, skillsCount]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const [skillsCount] = useState();

```
                  useEffect(() => {
```

                    if (skillsCount === 0 && !props.isEditMode) {

                      props.toggleEditMode();

```
                    }
```

                  }, [props, skillsCount]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            externalCall(props);
```
```
            props.onChange();
```
```
          }, []);
```
```
        }
```
```
      `,
```

      // Don't suggest to destructure props here since you can't.

```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```

                    externalCall(props);

```
                    props.onChange();
```
```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          useEffect(() => {
```
```
            props.onChange();
```
```
            externalCall(props);
```
```
          }, []);
```
```
        }
```
```
      `,
```

      // Don't suggest to destructure props here since you can't.

```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  useEffect(() => {
```
```
                    props.onChange();
```

                    externalCall(props);

```
                  }, [props]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let value;
```
```
          let value2;
```
```
          let value3;
```
```
          let value4;
```
```
          let asyncValue;
```
```
          useEffect(() => {
```
```
            if (value4) {
```
```
              value = {};
```
```
            }
```
```
            value2 = 100;
```
```
            value = 43;
```
```
            value4 = true;
```
```
            console.log(value2);
```
```
            console.log(value3);
```
```
            setTimeout(() => {
```
```
              asyncValue = 100;
```
```
            });
```
```
          }, []);
```
```
        }
```
```
      `,
```

      // This is a separate warning unrelated to others.

      // We could've made a separate rule for it but it's rare enough to name it.

      // No suggestions because the intent isn't clear.

```
      errors: [
```
```
        {
```
```
          message:
```
```
            // value2
```

            `Assignments to the 'value2' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```
```
            // value
```

            `Assignments to the 'value' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```
```
            // value4
```

            `Assignments to the 'value4' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```
```
            // asyncValue
```

            `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let value;
```
```
          let value2;
```
```
          let value3;
```
```
          let asyncValue;
```
```
          useEffect(() => {
```
```
            value = {};
```
```
            value2 = 100;
```
```
            value = 43;
```
```
            console.log(value2);
```
```
            console.log(value3);
```
```
            setTimeout(() => {
```
```
              asyncValue = 100;
```
```
            });
```
```
          }, [value, value2, value3]);
```
```
        }
```
```
      `,
```

      // This is a separate warning unrelated to others.

      // We could've made a separate rule for it but it's rare enough to name it.

      // No suggestions because the intent isn't clear.

```
      errors: [
```
```
        {
```
```
          message:
```
```
            // value
```

            `Assignments to the 'value' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```
```
            // value2
```

            `Assignments to the 'value2' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```
```
            // asyncValue
```

            `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +

            `will be lost after each render. To preserve the value over time, ` +

            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +

            `Otherwise, you can move this variable directly inside useEffect.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```

            const handleMove = () => {};

            myRef.current.addEventListener('mousemove', handleMove);

            return () => myRef.current.removeEventListener('mousemove', handleMove);

```
          }, []);
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The ref value 'myRef.current' will likely have changed by the time ` +

            `this effect cleanup function runs. If this ref points to a node ` +

            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

            `and use that variable in the cleanup function.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```

            const handleMove = () => {};

            myRef?.current?.addEventListener('mousemove', handleMove);

            return () => myRef?.current?.removeEventListener('mousemove', handleMove);

```
          }, []);
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The ref value 'myRef.current' will likely have changed by the time ` +

            `this effect cleanup function runs. If this ref points to a node ` +

            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

            `and use that variable in the cleanup function.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```
```
          useEffect(() => {
```

            const handleMove = () => {};

            myRef.current.addEventListener('mousemove', handleMove);

            return () => myRef.current.removeEventListener('mousemove', handleMove);

```
          });
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The ref value 'myRef.current' will likely have changed by the time ` +

            `this effect cleanup function runs. If this ref points to a node ` +

            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

            `and use that variable in the cleanup function.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useMyThing(myRef) {
```
```
          useEffect(() => {
```

            const handleMove = () => {};

            myRef.current.addEventListener('mousemove', handleMove);

            return () => myRef.current.removeEventListener('mousemove', handleMove);

```
          }, [myRef]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The ref value 'myRef.current' will likely have changed by the time ` +

            `this effect cleanup function runs. If this ref points to a node ` +

            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

            `and use that variable in the cleanup function.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function useMyThing(myRef) {
```
```
          useEffect(() => {
```

            const handleMouse = () => {};

            myRef.current.addEventListener('mousemove', handleMouse);

            myRef.current.addEventListener('mousein', handleMouse);

```
            return function() {
```
```
              setTimeout(() => {
```

                myRef.current.removeEventListener('mousemove', handleMouse);

                myRef.current.removeEventListener('mousein', handleMouse);

```
              });
```
```
            }
```
```
          }, [myRef]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The ref value 'myRef.current' will likely have changed by the time ` +

            `this effect cleanup function runs. If this ref points to a node ` +

            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

            `and use that variable in the cleanup function.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function useMyThing(myRef, active) {

```
          useEffect(() => {
```

            const handleMove = () => {};

```
            if (active) {
```

              myRef.current.addEventListener('mousemove', handleMove);

```
              return function() {
```
```
                setTimeout(() => {
```

                  myRef.current.removeEventListener('mousemove', handleMove);

```
                });
```
```
              }
```
```
            }
```
```
          }, [myRef, active]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The ref value 'myRef.current' will likely have changed by the time ` +

            `this effect cleanup function runs. If this ref points to a node ` +

            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

            `and use that variable in the cleanup function.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: `
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```

          useLayoutEffect_SAFE_FOR_SSR(() => {

            const handleMove = () => {};

            myRef.current.addEventListener('mousemove', handleMove);

            return () => myRef.current.removeEventListener('mousemove', handleMove);

```
          });
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
      output: `
```
```
        function MyComponent() {
```
```
          const myRef = useRef();
```

          useLayoutEffect_SAFE_FOR_SSR(() => {

            const handleMove = () => {};

            myRef.current.addEventListener('mousemove', handleMove);

            return () => myRef.current.removeEventListener('mousemove', handleMove);

```
          });
```
```
          return <div ref={myRef} />;
```
```
        }
```
```
      `,
```
```
      errors: [
```

        `The ref value 'myRef.current' will likely have changed by the time ` +

          `this effect cleanup function runs. If this ref points to a node ` +

          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +

          `and use that variable in the cleanup function.`,

```
      ],
```

      options: [{additionalHooks: 'useLayoutEffect_SAFE_FOR_SSR'}],

```
    },
```
```
    {
```

      // Autofix ignores constant primitives (leaving the ones that are there).

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local1 = 42;
```
```
          const local2 = '42';
```
```
          const local3 = null;
```
```
          const local4 = {};
```
```
          useEffect(() => {
```
```
            console.log(local1);
```
```
            console.log(local2);
```
```
            console.log(local3);
```
```
            console.log(local4);
```
```
          }, [local1, local3]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local4'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local1, local3, local4]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local1 = 42;
```
```
                  const local2 = '42';
```
```
                  const local3 = null;
```
```
                  const local4 = {};
```
```
                  useEffect(() => {
```

                    console.log(local1);

                    console.log(local2);

                    console.log(local3);

                    console.log(local4);

                  }, [local1, local3, local4]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          useEffect(() => {
```
```
            window.scrollTo(0, 0);
```
```
          }, [window]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has an unnecessary dependency: 'window'. " +

            'Either exclude it or remove the dependency array. ' +

            "Outer scope values like 'window' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  useEffect(() => {
```

                    window.scrollTo(0, 0);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        import MutableStore from 'store';

```
        function MyComponent() {
```
```
          useEffect(() => {
```

            console.log(MutableStore.hello);

```
          }, [MutableStore.hello]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has an unnecessary dependency: 'MutableStore.hello'. " +

            'Either exclude it or remove the dependency array. ' +

            "Outer scope values like 'MutableStore.hello' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                import MutableStore from 'store';

                function MyComponent() {

```
                  useEffect(() => {
```

                    console.log(MutableStore.hello);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        import MutableStore from 'store';

```
        let z = {};
```
```
        function MyComponent(props) {
```
```
          let x = props.foo;
```
```
          {
```
```
            let y = props.bar;
```
```
            useEffect(() => {
```

              console.log(MutableStore.hello.world, props.foo, x, y, z, global.stuff);

            }, [MutableStore.hello.world, props.foo, x, y, z, global.stuff]);

```
          }
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has unnecessary dependencies: ' +

            "'MutableStore.hello.world', 'global.stuff', and 'z'. " +

            'Either exclude them or remove the dependency array. ' +

            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo, x, y]',

```
              output: normalizeIndent`
```

                import MutableStore from 'store';

```
                let z = {};
```

                function MyComponent(props) {

```
                  let x = props.foo;
```
```
                  {
```
```
                    let y = props.bar;
```
```
                    useEffect(() => {
```

                      console.log(MutableStore.hello.world, props.foo, x, y, z, global.stuff);

                    }, [props.foo, x, y]);

```
                  }
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        import MutableStore from 'store';

```
        let z = {};
```
```
        function MyComponent(props) {
```
```
          let x = props.foo;
```
```
          {
```
```
            let y = props.bar;
```
```
            useEffect(() => {
```
```
              // nothing
```

            }, [MutableStore.hello.world, props.foo, x, y, z, global.stuff]);

```
          }
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect has unnecessary dependencies: ' +

            "'MutableStore.hello.world', 'global.stuff', and 'z'. " +

            'Either exclude them or remove the dependency array. ' +

            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

          // The output should contain the ones that are inside a component

          // since there are legit reasons to over-specify them for effects.

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.foo, x, y]',

```
              output: normalizeIndent`
```

                import MutableStore from 'store';

```
                let z = {};
```

                function MyComponent(props) {

```
                  let x = props.foo;
```
```
                  {
```
```
                    let y = props.bar;
```
```
                    useEffect(() => {
```
```
                      // nothing
```

                    }, [props.foo, x, y]);

```
                  }
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        import MutableStore from 'store';

```
        let z = {};
```
```
        function MyComponent(props) {
```
```
          let x = props.foo;
```
```
          {
```
```
            let y = props.bar;
```

            const fn = useCallback(() => {

```
              // nothing
```

            }, [MutableStore.hello.world, props.foo, x, y, z, global.stuff]);

```
          }
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useCallback has unnecessary dependencies: ' +

            "'MutableStore.hello.world', 'global.stuff', 'props.foo', 'x', 'y', and 'z'. " +

            'Either exclude them or remove the dependency array. ' +

            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                import MutableStore from 'store';

```
                let z = {};
```

                function MyComponent(props) {

```
                  let x = props.foo;
```
```
                  {
```
```
                    let y = props.bar;
```

                    const fn = useCallback(() => {

```
                      // nothing
```
```
                    }, []);
```
```
                  }
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        import MutableStore from 'store';

```
        let z = {};
```
```
        function MyComponent(props) {
```
```
          let x = props.foo;
```
```
          {
```
```
            let y = props.bar;
```

            const fn = useCallback(() => {

```
              // nothing
```

            }, [MutableStore?.hello?.world, props.foo, x, y, z, global?.stuff]);

```
          }
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useCallback has unnecessary dependencies: ' +

            "'MutableStore.hello.world', 'global.stuff', 'props.foo', 'x', 'y', and 'z'. " +

            'Either exclude them or remove the dependency array. ' +

            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +

            "because mutating them doesn't re-render the component.",

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                import MutableStore from 'store';

```
                let z = {};
```

                function MyComponent(props) {

```
                  let x = props.foo;
```
```
                  {
```
```
                    let y = props.bar;
```

                    const fn = useCallback(() => {

```
                      // nothing
```
```
                    }, []);
```
```
                  }
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Every almost-static function is tainted by a dynamic value.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

          let [, dispatch] = React.useReducer();

```
          let taint = props.foo;
```

          function handleNext1(value) {

            let value2 = value * taint;

```
            setState(value2);
```
```
            console.log('hello');
```
```
          }
```

          const handleNext2 = (value) => {

```
            setState(taint(value));
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function(value) {

            setTimeout(() => console.log(taint));

            dispatch({ type: 'x', value });

```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

```
          }, []);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext2);

```
          }, []);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext3);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'handleNext1'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext1]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    setTimeout(() => console.log(taint));

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, [handleNext1]);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext2]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    setTimeout(() => console.log(taint));

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, []);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, [handleNext2]);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useMemo has a missing dependency: 'handleNext3'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext3]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    setTimeout(() => console.log(taint));

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, []);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, [handleNext3]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

          let [, dispatch] = React.useReducer();

```
          let taint = props.foo;
```
```
          // Shouldn't affect anything
```
```
          function handleChange() {}
```

          function handleNext1(value) {

            let value2 = value * taint;

```
            setState(value2);
```
```
            console.log('hello');
```
```
          }
```

          const handleNext2 = (value) => {

```
            setState(taint(value));
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function(value) {

```
            console.log(taint);
```

            dispatch({ type: 'x', value });

```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

```
          }, []);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext2);

```
          }, []);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext3);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'handleNext1'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext1]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  // Shouldn't affect anything

                  function handleChange() {}

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    console.log(taint);

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, [handleNext1]);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext2]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  // Shouldn't affect anything

                  function handleChange() {}

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    console.log(taint);

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, []);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, [handleNext2]);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useMemo has a missing dependency: 'handleNext3'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext3]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  // Shouldn't affect anything

                  function handleChange() {}

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    console.log(taint);

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, []);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, [handleNext3]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      // Regression test
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

          let [, dispatch] = React.useReducer();

```
          let taint = props.foo;
```
```
          // Shouldn't affect anything
```

          const handleChange = () => {};

          function handleNext1(value) {

            let value2 = value * taint;

```
            setState(value2);
```
```
            console.log('hello');
```
```
          }
```

          const handleNext2 = (value) => {

```
            setState(taint(value));
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function(value) {

```
            console.log(taint);
```

            dispatch({ type: 'x', value });

```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

```
          }, []);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext2);

```
          }, []);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext3);

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'handleNext1'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext1]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  // Shouldn't affect anything

                  const handleChange = () => {};

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    console.log(taint);

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, [handleNext1]);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext2]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  // Shouldn't affect anything

                  const handleChange = () => {};

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    console.log(taint);

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, []);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, [handleNext2]);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "React Hook useMemo has a missing dependency: 'handleNext3'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [handleNext3]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  let [, dispatch] = React.useReducer();

                  let taint = props.foo;

                  // Shouldn't affect anything

                  const handleChange = () => {};

                  function handleNext1(value) {

                    let value2 = value * taint;

```
                    setState(value2);
```

                    console.log('hello');

```
                  }
```

                  const handleNext2 = (value) => {

                    setState(taint(value));

                    console.log('hello');

```
                  };
```

                  let handleNext3 = function(value) {

                    console.log(taint);

                    dispatch({ type: 'x', value });

```
                  };
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

```
                  }, []);
```

                  useLayoutEffect(() => {

                    return Store.subscribe(handleNext2);

```
                  }, []);
```
```
                  useMemo(() => {
```

                    return Store.subscribe(handleNext3);

```
                  }, [handleNext3]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

```
          function handleNext(value) {
```
```
            setState(value);
```
```
          }
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, [handleNext]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The 'handleNext' function makes the dependencies of ` +

            `useEffect Hook (at line 11) change on every render. ` +

            `Move it inside the useEffect callback. Alternatively, ` +

            `wrap the definition of 'handleNext' in its own useCallback() Hook.`,

          // Not gonna fix a function definition

          // because it's not always safe due to hoisting.

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Even if the function only references static values,

      // once you specify it in deps, it will invalidate them.

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

          const handleNext = (value) => {

```
            setState(value);
```
```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, [handleNext]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The 'handleNext' function makes the dependencies of ` +

            `useEffect Hook (at line 11) change on every render. ` +

            `Move it inside the useEffect callback. Alternatively, ` +

            `wrap the definition of 'handleNext' in its own useCallback() Hook.`,

          // We don't fix moving (too invasive). But that's the suggested fix

          // when only effect uses this function. Otherwise, we'd useCallback.

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // Even if the function only references static values,

      // once you specify it in deps, it will invalidate them.

      // However, we can't suggest moving handleNext into the

      // effect because it is *also* used outside of it.

      // So our suggestion is useCallback().

```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

          const handleNext = (value) => {

```
            setState(value);
```
```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, [handleNext]);
```

          return <div onClick={handleNext} />;

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The 'handleNext' function makes the dependencies of ` +

            `useEffect Hook (at line 11) change on every render. ` +

            `To fix this, wrap the definition of 'handleNext' in its own useCallback() Hook.`,

          // We fix this one with useCallback since it's

          // the easy fix and you can't just move it into effect.

```
          suggestions: [
```
```
            {
```

              desc: "Wrap the definition of 'handleNext' in its own useCallback() Hook.",

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let [, setState] = useState();

                  const handleNext = useCallback((value) => {

```
                    setState(value);
```
```
                  });
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext);

```
                  }, [handleNext]);
```

                  return <div onClick={handleNext} />;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          function handleNext1() {
```
```
            console.log('hello');
```
```
          }
```
```
          const handleNext2 = () => {
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function() {

```
            console.log('hello');
```
```
          };
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

```
          }, [handleNext1]);
```
```
          useLayoutEffect(() => {
```

            return Store.subscribe(handleNext2);

```
          }, [handleNext2]);
```
```
          useMemo(() => {
```

            return Store.subscribe(handleNext3);

```
          }, [handleNext3]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'handleNext1' function makes the dependencies of useEffect Hook " +

            '(at line 14) change on every render. Move it inside the useEffect callback. ' +

            "Alternatively, wrap the definition of 'handleNext1' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +

            '(at line 17) change on every render. Move it inside the useLayoutEffect callback. ' +

            "Alternatively, wrap the definition of 'handleNext2' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext3' function makes the dependencies of useMemo Hook " +

            '(at line 20) change on every render. Move it inside the useMemo callback. ' +

            "Alternatively, wrap the definition of 'handleNext3' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          function handleNext1() {
```
```
            console.log('hello');
```
```
          }
```
```
          const handleNext2 = () => {
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function() {

```
            console.log('hello');
```
```
          };
```
```
          useEffect(() => {
```
```
            handleNext1();
```

            return Store.subscribe(() => handleNext1());

```
          }, [handleNext1]);
```
```
          useLayoutEffect(() => {
```
```
            handleNext2();
```

            return Store.subscribe(() => handleNext2());

```
          }, [handleNext2]);
```
```
          useMemo(() => {
```
```
            handleNext3();
```

            return Store.subscribe(() => handleNext3());

```
          }, [handleNext3]);
```
```
        }
```
```
      `,
```

      // Suggestions don't wrap into useCallback here

      // because they are only referenced by effect itself.

```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'handleNext1' function makes the dependencies of useEffect Hook " +

            '(at line 15) change on every render. Move it inside the useEffect callback. ' +

            "Alternatively, wrap the definition of 'handleNext1' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +

            '(at line 19) change on every render. Move it inside the useLayoutEffect callback. ' +

            "Alternatively, wrap the definition of 'handleNext2' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext3' function makes the dependencies of useMemo Hook " +

            '(at line 23) change on every render. Move it inside the useMemo callback. ' +

            "Alternatively, wrap the definition of 'handleNext3' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          function handleNext1() {
```
```
            console.log('hello');
```
```
          }
```
```
          const handleNext2 = () => {
```
```
            console.log('hello');
```
```
          };
```

          let handleNext3 = function() {

```
            console.log('hello');
```
```
          };
```
```
          useEffect(() => {
```
```
            handleNext1();
```

            return Store.subscribe(() => handleNext1());

```
          }, [handleNext1]);
```
```
          useLayoutEffect(() => {
```
```
            handleNext2();
```

            return Store.subscribe(() => handleNext2());

```
          }, [handleNext2]);
```
```
          useMemo(() => {
```
```
            handleNext3();
```

            return Store.subscribe(() => handleNext3());

```
          }, [handleNext3]);
```
```
          return (
```
```
            <div
```
```
              onClick={() => {
```
```
                handleNext1();
```

                setTimeout(handleNext2);

```
                setTimeout(() => {
```
```
                  handleNext3();
```
```
                });
```
```
              }}
```
```
            />
```
```
          );
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'handleNext1' function makes the dependencies of useEffect Hook " +

            '(at line 15) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext1' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +

            '(at line 19) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext2' in its own useCallback() Hook.",

          // Suggestion wraps into useCallback where possible (variables only)

          // because they are only referenced outside the effect.

```
          suggestions: [
```
```
            {
```

              desc: "Wrap the definition of 'handleNext2' in its own useCallback() Hook.",

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  function handleNext1() {

                    console.log('hello');

```
                  }
```

                  const handleNext2 = useCallback(() => {

                    console.log('hello');

```
                  });
```

                  let handleNext3 = function() {

                    console.log('hello');

```
                  };
```
```
                  useEffect(() => {
```
```
                    handleNext1();
```

                    return Store.subscribe(() => handleNext1());

```
                  }, [handleNext1]);
```

                  useLayoutEffect(() => {

```
                    handleNext2();
```

                    return Store.subscribe(() => handleNext2());

```
                  }, [handleNext2]);
```
```
                  useMemo(() => {
```
```
                    handleNext3();
```

                    return Store.subscribe(() => handleNext3());

```
                  }, [handleNext3]);
```
```
                  return (
```
```
                    <div
```
```
                      onClick={() => {
```
```
                        handleNext1();
```

                        setTimeout(handleNext2);

                        setTimeout(() => {

                          handleNext3();

```
                        });
```
```
                      }}
```
```
                    />
```
```
                  );
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext3' function makes the dependencies of useMemo Hook " +

            '(at line 23) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext3' in its own useCallback() Hook.",

          // Autofix wraps into useCallback where possible (variables only)

          // because they are only referenced outside the effect.

```
          suggestions: [
```
```
            {
```

              desc: "Wrap the definition of 'handleNext3' in its own useCallback() Hook.",

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  function handleNext1() {

                    console.log('hello');

```
                  }
```

                  const handleNext2 = () => {

                    console.log('hello');

```
                  };
```

                  let handleNext3 = useCallback(function() {

                    console.log('hello');

```
                  });
```
```
                  useEffect(() => {
```
```
                    handleNext1();
```

                    return Store.subscribe(() => handleNext1());

```
                  }, [handleNext1]);
```

                  useLayoutEffect(() => {

```
                    handleNext2();
```

                    return Store.subscribe(() => handleNext2());

```
                  }, [handleNext2]);
```
```
                  useMemo(() => {
```
```
                    handleNext3();
```

                    return Store.subscribe(() => handleNext3());

```
                  }, [handleNext3]);
```
```
                  return (
```
```
                    <div
```
```
                      onClick={() => {
```
```
                        handleNext1();
```

                        setTimeout(handleNext2);

                        setTimeout(() => {

                          handleNext3();

```
                        });
```
```
                      }}
```
```
                    />
```
```
                  );
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          const handleNext1 = () => {
```
```
            console.log('hello');
```
```
          };
```
```
          function handleNext2() {
```
```
            console.log('hello');
```
```
          }
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

            return Store.subscribe(handleNext2);

          }, [handleNext1, handleNext2]);

```
          useEffect(() => {
```

            return Store.subscribe(handleNext1);

            return Store.subscribe(handleNext2);

          }, [handleNext1, handleNext2]);

```
        }
```
```
      `,
```

      // Normally we'd suggest moving handleNext inside an

      // effect. But it's used by more than one. So we

      // suggest useCallback() and use it for the autofix

      // where possible (variable but not declaration).

      // TODO: we could coalesce messages for the same function if it affects multiple Hooks.

```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'handleNext1' function makes the dependencies of useEffect Hook " +

            '(at line 12) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext1' in its own useCallback() Hook.",

```
          suggestions: [
```
```
            {
```

              desc: "Wrap the definition of 'handleNext1' in its own useCallback() Hook.",

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const handleNext1 = useCallback(() => {

                    console.log('hello');

```
                  });
```

                  function handleNext2() {

                    console.log('hello');

```
                  }
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

                    return Store.subscribe(handleNext2);

                  }, [handleNext1, handleNext2]);

```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

                    return Store.subscribe(handleNext2);

                  }, [handleNext1, handleNext2]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext1' function makes the dependencies of useEffect Hook " +

            '(at line 16) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext1' in its own useCallback() Hook.",

```
          suggestions: [
```
```
            {
```

              desc: "Wrap the definition of 'handleNext1' in its own useCallback() Hook.",

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  const handleNext1 = useCallback(() => {

                    console.log('hello');

```
                  });
```

                  function handleNext2() {

                    console.log('hello');

```
                  }
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

                    return Store.subscribe(handleNext2);

                  }, [handleNext1, handleNext2]);

```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext1);

                    return Store.subscribe(handleNext2);

                  }, [handleNext1, handleNext2]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext2' function makes the dependencies of useEffect Hook " +

            '(at line 12) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext2' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'handleNext2' function makes the dependencies of useEffect Hook " +

            '(at line 16) change on every render. To fix this, wrap the ' +

            "definition of 'handleNext2' in its own useCallback() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let handleNext = () => {
```
```
            console.log('hello');
```
```
          };
```
```
          if (props.foo) {
```
```
            handleNext = () => {
```
```
              console.log('hello');
```
```
            };
```
```
          }
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, [handleNext]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'handleNext' function makes the dependencies of useEffect Hook " +

            '(at line 13) change on every render. To fix this, wrap the definition of ' +

            "'handleNext' in its own useCallback() Hook.",

          // Normally we'd suggest moving handleNext inside an

          // effect. But it's used more than once.

          // TODO: our autofix here isn't quite sufficient because

          // it only wraps the first definition. But seems ok.

```
          suggestions: [
```
```
            {
```

              desc: "Wrap the definition of 'handleNext' in its own useCallback() Hook.",

```
              output: normalizeIndent`
```

                function MyComponent(props) {

                  let handleNext = useCallback(() => {

                    console.log('hello');

```
                  });
```
```
                  if (props.foo) {
```

                    handleNext = () => {

                      console.log('hello');

```
                    };
```
```
                  }
```
```
                  useEffect(() => {
```

                    return Store.subscribe(handleNext);

```
                  }, [handleNext]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```

          let [, setState] = useState();

```
          let taint = props.foo;
```
```
          function handleNext(value) {
```

            let value2 = value * taint;

```
            setState(value2);
```
```
            console.log('hello');
```
```
          }
```
```
          useEffect(() => {
```

            return Store.subscribe(handleNext);

```
          }, [handleNext]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The 'handleNext' function makes the dependencies of ` +

            `useEffect Hook (at line 14) change on every render. ` +

            `Move it inside the useEffect callback. Alternatively, wrap the ` +

            `definition of 'handleNext' in its own useCallback() Hook.`,

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          let [count, setCount] = useState(0);

```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              setCount(count + 1);
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'count'. " +

            'Either include it or remove the dependency array. ' +

            `You can also do a functional update 'setCount(c => ...)' if you ` +

            `only need 'count' in the 'setCount' call.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [count]',

```
              output: normalizeIndent`
```
```
                function Counter() {
```

                  let [count, setCount] = useState(0);

```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(count + 1);

```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [count]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          let [count, setCount] = useState(0);

          let [increment, setIncrement] = useState(0);

```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count + increment);

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'count' and 'increment'. " +

            'Either include them or remove the dependency array. ' +

            `You can also do a functional update 'setCount(c => ...)' if you ` +

            `only need 'count' in the 'setCount' call.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [count, increment]',

```
              output: normalizeIndent`
```
```
                function Counter() {
```

                  let [count, setCount] = useState(0);

                  let [increment, setIncrement] = useState(0);

```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(count + increment);

```
                    }, 1000);
```

                    return () => clearInterval(id);

                  }, [count, increment]);

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          let [count, setCount] = useState(0);

          let [increment, setIncrement] = useState(0);

```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => count + increment);

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'increment'. " +

            'Either include it or remove the dependency array. ' +

            `You can also replace multiple useState variables with useReducer ` +

            `if 'setCount' needs the current value of 'increment'.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [increment]',

```
              output: normalizeIndent`
```
```
                function Counter() {
```

                  let [count, setCount] = useState(0);

                  let [increment, setIncrement] = useState(0);

```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(count => count + increment);

```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [increment]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          let [count, setCount] = useState(0);

          let increment = useCustomHook();

```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => count + increment);

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```

      // This intentionally doesn't show the reducer message

      // because we don't know if it's safe for it to close over a value.

      // We only show it for state variables (and possibly props).

```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'increment'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [increment]',

```
              output: normalizeIndent`
```
```
                function Counter() {
```

                  let [count, setCount] = useState(0);

                  let increment = useCustomHook();

```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(count => count + increment);

```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [increment]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter({ step }) {
```

          let [count, setCount] = useState(0);

```
          function increment(x) {
```
```
            return x + step;
```
```
          }
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => increment(count));

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```

      // This intentionally doesn't show the reducer message

      // because we don't know if it's safe for it to close over a value.

      // We only show it for state variables (and possibly props).

```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'increment'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [increment]',

```
              output: normalizeIndent`
```

                function Counter({ step }) {

                  let [count, setCount] = useState(0);

                  function increment(x) {

```
                    return x + step;
```
```
                  }
```
```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(count => increment(count));

```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [increment]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter({ step }) {
```

          let [count, setCount] = useState(0);

```
          function increment(x) {
```
```
            return x + step;
```
```
          }
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => increment(count));

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, [increment]);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `The 'increment' function makes the dependencies of useEffect Hook ` +

            `(at line 14) change on every render. Move it inside the useEffect callback. ` +

            `Alternatively, wrap the definition of \'increment\' in its own ` +

```
            `useCallback() Hook.`,
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Counter({ increment }) {

          let [count, setCount] = useState(0);

```
          useEffect(() => {
```

            let id = setInterval(() => {

              setCount(count => count + increment);

```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'increment'. " +

            'Either include it or remove the dependency array. ' +

            `If 'setCount' needs the current value of 'increment', ` +

            `you can also switch to useReducer instead of useState and read 'increment' in the reducer.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [increment]',

```
              output: normalizeIndent`
```

                function Counter({ increment }) {

                  let [count, setCount] = useState(0);

```
                  useEffect(() => {
```

                    let id = setInterval(() => {

                      setCount(count => count + increment);

```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [increment]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Counter() {
```

          const [count, setCount] = useState(0);

```
          function tick() {
```
```
            setCount(count + 1);
```
```
          }
```
```
          useEffect(() => {
```

            let id = setInterval(() => {

```
              tick();
```
```
            }, 1000);
```

            return () => clearInterval(id);

```
          }, []);
```
```
          return <h1>{count}</h1>;
```
```
        }
```
```
      `,
```

      // TODO: ideally this should suggest useState updater form

      // since this code doesn't actually work. The autofix could

      // at least avoid suggesting 'tick' since it's obviously

      // always different, and thus useless.

```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'tick'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [tick]',

```
              output: normalizeIndent`
```
```
                function Counter() {
```

                  const [count, setCount] = useState(0);

```
                  function tick() {
```

                    setCount(count + 1);

```
                  }
```
```
                  useEffect(() => {
```

                    let id = setInterval(() => {

```
                      tick();
```
```
                    }, 1000);
```

                    return () => clearInterval(id);

```
                  }, [tick]);
```

                  return <h1>{count}</h1>;

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      // Regression test for a crash
```
```
      code: normalizeIndent`
```
```
        function Podcasts() {
```
```
          useEffect(() => {
```
```
            alert(podcasts);
```
```
          }, []);
```

          let [podcasts, setPodcasts] = useState(null);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has a missing dependency: 'podcasts'. ` +

            `Either include it or remove the dependency array.`,

          // Note: this autofix is shady because

          // the variable is used before declaration.

          // TODO: Maybe we can catch those fixes and not autofix.

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [podcasts]',

```
              output: normalizeIndent`
```
```
                function Podcasts() {
```
```
                  useEffect(() => {
```
```
                    alert(podcasts);
```
```
                  }, [podcasts]);
```

                  let [podcasts, setPodcasts] = useState(null);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Podcasts({ fetchPodcasts, id }) {

          let [podcasts, setPodcasts] = useState(null);

```
          useEffect(() => {
```

            fetchPodcasts(id).then(setPodcasts);

```
          }, [id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +

            `Either include it or remove the dependency array. ` +

            `If 'fetchPodcasts' changes too often, ` +

            `find the parent component that defines it and wrap that definition in useCallback.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',

```
              output: normalizeIndent`
```

                function Podcasts({ fetchPodcasts, id }) {

                  let [podcasts, setPodcasts] = useState(null);

```
                  useEffect(() => {
```

                    fetchPodcasts(id).then(setPodcasts);

                  }, [fetchPodcasts, id]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Podcasts({ api: { fetchPodcasts }, id }) {

          let [podcasts, setPodcasts] = useState(null);

```
          useEffect(() => {
```

            fetchPodcasts(id).then(setPodcasts);

```
          }, [id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +

            `Either include it or remove the dependency array. ` +

            `If 'fetchPodcasts' changes too often, ` +

            `find the parent component that defines it and wrap that definition in useCallback.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',

```
              output: normalizeIndent`
```

                function Podcasts({ api: { fetchPodcasts }, id }) {

                  let [podcasts, setPodcasts] = useState(null);

```
                  useEffect(() => {
```

                    fetchPodcasts(id).then(setPodcasts);

                  }, [fetchPodcasts, id]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {

          let [podcasts, setPodcasts] = useState(null);

```
          useEffect(() => {
```
```
            setTimeout(() => {
```
```
              console.log(id);
```

              fetchPodcasts(id).then(setPodcasts);

              fetchPodcasts2(id).then(setPodcasts);

```
            });
```
```
          }, [id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has missing dependencies: 'fetchPodcasts' and 'fetchPodcasts2'. ` +

            `Either include them or remove the dependency array. ` +

            `If 'fetchPodcasts' changes too often, ` +

            `find the parent component that defines it and wrap that definition in useCallback.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [fetchPodcasts, fetchPodcasts2, id]',

```
              output: normalizeIndent`
```

                function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {

                  let [podcasts, setPodcasts] = useState(null);

```
                  useEffect(() => {
```
```
                    setTimeout(() => {
```
```
                      console.log(id);
```

                      fetchPodcasts(id).then(setPodcasts);

                      fetchPodcasts2(id).then(setPodcasts);

```
                    });
```

                  }, [fetchPodcasts, fetchPodcasts2, id]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Podcasts({ fetchPodcasts, id }) {

          let [podcasts, setPodcasts] = useState(null);

```
          useEffect(() => {
```

            console.log(fetchPodcasts);

            fetchPodcasts(id).then(setPodcasts);

```
          }, [id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +

            `Either include it or remove the dependency array. ` +

            `If 'fetchPodcasts' changes too often, ` +

            `find the parent component that defines it and wrap that definition in useCallback.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',

```
              output: normalizeIndent`
```

                function Podcasts({ fetchPodcasts, id }) {

                  let [podcasts, setPodcasts] = useState(null);

```
                  useEffect(() => {
```

                    console.log(fetchPodcasts);

                    fetchPodcasts(id).then(setPodcasts);

                  }, [fetchPodcasts, id]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Podcasts({ fetchPodcasts, id }) {

          let [podcasts, setPodcasts] = useState(null);

```
          useEffect(() => {
```

            console.log(fetchPodcasts);

            fetchPodcasts?.(id).then(setPodcasts);

```
          }, [id]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +

            `Either include it or remove the dependency array. ` +

            `If 'fetchPodcasts' changes too often, ` +

            `find the parent component that defines it and wrap that definition in useCallback.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',

```
              output: normalizeIndent`
```

                function Podcasts({ fetchPodcasts, id }) {

                  let [podcasts, setPodcasts] = useState(null);

```
                  useEffect(() => {
```

                    console.log(fetchPodcasts);

                    fetchPodcasts?.(id).then(setPodcasts);

                  }, [fetchPodcasts, id]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```

      // The mistake here is that it was moved inside the effect

      // so it can't be referenced in the deps array.

```
      code: normalizeIndent`
```
```
        function Thing() {
```
```
          useEffect(() => {
```

            const fetchData = async () => {};

```
            fetchData();
```
```
          }, [fetchData]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect has an unnecessary dependency: 'fetchData'. ` +

            `Either exclude it or remove the dependency array.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```
```
                function Thing() {
```
```
                  useEffect(() => {
```

                    const fetchData = async () => {};

```
                    fetchData();
```
```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Hello() {
```

          const [state, setState] = useState(0);

```
          useEffect(() => {
```
```
            setState({});
```
```
          });
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect contains a call to 'setState'. ` +

            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +

            `To fix this, pass [] as a second argument to the useEffect Hook.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Add dependencies array: []',

```
              output: normalizeIndent`
```
```
                function Hello() {
```

                  const [state, setState] = useState(0);

```
                  useEffect(() => {
```
```
                    setState({});
```
```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Hello() {
```

          const [data, setData] = useState(0);

```
          useEffect(() => {
```
```
            fetchData.then(setData);
```
```
          });
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect contains a call to 'setData'. ` +

            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +

            `To fix this, pass [] as a second argument to the useEffect Hook.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Add dependencies array: []',

```
              output: normalizeIndent`
```
```
                function Hello() {
```

                  const [data, setData] = useState(0);

```
                  useEffect(() => {
```

                    fetchData.then(setData);

```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Hello({ country }) {
```

          const [data, setData] = useState(0);

```
          useEffect(() => {
```

            fetchData(country).then(setData);

```
          });
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect contains a call to 'setData'. ` +

            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +

            `To fix this, pass [country] as a second argument to the useEffect Hook.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Add dependencies array: [country]',

```
              output: normalizeIndent`
```

                function Hello({ country }) {

                  const [data, setData] = useState(0);

```
                  useEffect(() => {
```

                    fetchData(country).then(setData);

```
                  }, [country]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function Hello({ prop1, prop2 }) {

          const [state, setState] = useState(0);

```
          useEffect(() => {
```
```
            if (prop1) {
```
```
              setState(prop2);
```
```
            }
```
```
          });
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `React Hook useEffect contains a call to 'setState'. ` +

            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +

            `To fix this, pass [prop1, prop2] as a second argument to the useEffect Hook.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Add dependencies array: [prop1, prop2]',

```
              output: normalizeIndent`
```

                function Hello({ prop1, prop2 }) {

                  const [state, setState] = useState(0);

```
                  useEffect(() => {
```
```
                    if (prop1) {
```
```
                      setState(prop2);
```
```
                    }
```
```
                  }, [prop1, prop2]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Thing() {
```

          useEffect(async () => {}, []);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `Effect callbacks are synchronous to prevent race conditions. ` +

            `Put the async function inside:\n\n` +

```
            'useEffect(() => {\n' +
```

            '  async function fetchData() {\n' +

            '    // You can await here\n' +

            '    const response = await MyAPI.getData(someId);\n' +

```
            '    // ...\n' +
```
```
            '  }\n' +
```
```
            '  fetchData();\n' +
```

            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +

            'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Thing() {
```
```
          useEffect(async () => {});
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            `Effect callbacks are synchronous to prevent race conditions. ` +

            `Put the async function inside:\n\n` +

```
            'useEffect(() => {\n' +
```

            '  async function fetchData() {\n' +

            '    // You can await here\n' +

            '    const response = await MyAPI.getData(someId);\n' +

```
            '    // ...\n' +
```
```
            '  }\n' +
```
```
            '  fetchData();\n' +
```

            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +

            'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching',

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example() {
```

          const foo = useCallback(() => {

```
            foo();
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has an unnecessary dependency: 'foo'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```
```
                function Example() {
```

                  const foo = useCallback(() => {

```
                    foo();
```
```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example({ prop }) {
```

          const foo = useCallback(() => {

```
            prop.hello(foo);
```
```
          }, [foo]);
```

          const bar = useCallback(() => {

```
            foo();
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useCallback has a missing dependency: 'prop'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [prop]',

```
              output: normalizeIndent`
```

                function Example({ prop }) {

                  const foo = useCallback(() => {

```
                    prop.hello(foo);
```
```
                  }, [prop]);
```

                  const bar = useCallback(() => {

```
                    foo();
```
```
                  }, [foo]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          function myEffect() {
```
```
            console.log(local);
```
```
          }
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  function myEffect() {

                    console.log(local);

```
                  }
```

                  useEffect(myEffect, [local]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          const myEffect = () => {
```
```
            console.log(local);
```
```
          };
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const myEffect = () => {

                    console.log(local);

```
                  };
```

                  useEffect(myEffect, [local]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```

          const myEffect = function() {

```
            console.log(local);
```
```
          };
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const myEffect = function() {

                    console.log(local);

```
                  };
```

                  useEffect(myEffect, [local]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          const myEffect = () => {
```
```
            otherThing();
```
```
          };
```
```
          const otherThing = () => {
```
```
            console.log(local);
```
```
          };
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'otherThing'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [otherThing]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const myEffect = () => {

```
                    otherThing();
```
```
                  };
```

                  const otherThing = () => {

                    console.log(local);

```
                  };
```

                  useEffect(myEffect, [otherThing]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```

          const myEffect = debounce(() => {

```
            console.log(local);
```
```
          }, delay);
```
```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'myEffect'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [myEffect]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const myEffect = debounce(() => {

                    console.log(local);

```
                  }, delay);
```

                  useEffect(myEffect, [myEffect]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```

          const myEffect = debounce(() => {

```
            console.log(local);
```
```
          }, delay);
```

          useEffect(myEffect, [local]);

```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'myEffect'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [myEffect]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const local = {};
```

                  const myEffect = debounce(() => {

                    console.log(local);

```
                  }, delay);
```

                  useEffect(myEffect, [myEffect]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({myEffect}) {

```
          useEffect(myEffect, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'myEffect'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [myEffect]',

```
              output: normalizeIndent`
```

                function MyComponent({myEffect}) {

                  useEffect(myEffect, [myEffect]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(debounce(() => {
```
```
            console.log(local);
```
```
          }, delay), []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'React Hook useEffect received a function whose dependencies ' +

            'are unknown. Pass an inline function instead.',

```
          suggestions: [],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```

      // Dangerous autofix is enabled due to the option:

```
      output: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {};
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, [local]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
        },
```
```
      ],
```

      // Keep this until major IDEs and VS Code FB ESLint plugin support Suggestions API.

      options: [{enableDangerousAutofixThisMayCauseInfiniteLoops: true}],

```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent(props) {
```
```
          let foo = {}
```
```
          useEffect(() => {
```
```
            foo.bar.baz = 43;
```
```
            props.foo.bar.baz = 1;
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'foo.bar' and 'props.foo.bar'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [foo.bar, props.foo.bar]',

```
              output: normalizeIndent`
```

                function MyComponent(props) {

```
                  let foo = {}
```
```
                  useEffect(() => {
```
```
                    foo.bar.baz = 43;
```

                    props.foo.bar.baz = 1;

                  }, [foo.bar, props.foo.bar]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Component() {
```
```
          const foo = {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          const foo = [];
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' array makes the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          const foo = () => {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' function makes the dependencies of useMemo Hook (at line 4) change on every render. " +

            "Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own " +

```
            'useCallback() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Component() {
```

          const foo = function bar(){};

```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' function makes the dependencies of useMemo Hook (at line 4) change on every render. " +

            "Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own " +

```
            'useCallback() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Component() {
```
```
          const foo = class {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' class makes the dependencies of useMemo Hook (at line 4) 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 Component() {
```

          const foo = true ? {} : "fine";

```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' conditional could make the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          const foo = bar || {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' logical expression could make the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          const foo = bar ?? {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' logical expression could make the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          const foo = bar && {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' logical expression could make the dependencies of useMemo Hook (at line 4) 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 Component() {
```

          const foo = bar ? baz ? {} : null : null;

```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' conditional could make the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          let foo = {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          var foo = {};
```
```
          useMemo(() => foo, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useMemo Hook (at line 4) 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 Component() {
```
```
          const foo = {};
```
```
          useCallback(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useCallback Hook (at line 6) change on every render. " +

            "Move it inside the useCallback callback. Alternatively, wrap the initialization of 'foo' in its own " +

```
            'useMemo() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Component() {
```
```
          const foo = {};
```
```
          useEffect(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useEffect Hook (at line 6) change on every render. " +

            "Move it inside the useEffect callback. Alternatively, wrap the initialization of 'foo' in its own " +

```
            'useMemo() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Component() {
```
```
          const foo = {};
```
```
          useLayoutEffect(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useLayoutEffect Hook (at line 6) change on every render. " +

            "Move it inside the useLayoutEffect callback. Alternatively, wrap the initialization of 'foo' in its own " +

```
            'useMemo() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Component() {
```
```
          const foo = {};
```
```
          useImperativeHandle(
```
```
            ref,
```
```
            () => {
```
```
               console.log(foo);
```
```
            },
```
```
            [foo]
```
```
          );
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useImperativeHandle Hook (at line 9) change on every render. " +

            "Move it inside the useImperativeHandle callback. Alternatively, wrap the initialization of 'foo' in its own " +

```
            'useMemo() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Foo(section) {
```

          const foo = section.section_components?.edges ?? [];

```
          useEffect(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' logical expression could make the dependencies of useEffect Hook (at line 6) change on every render. " +

            "Move it inside the useEffect callback. Alternatively, wrap the initialization of 'foo' in its own " +

```
            'useMemo() Hook.',
```
```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Foo(section) {
```
```
          const foo = {};
```
```
          console.log(foo);
```
```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useMemo Hook (at line 7) change on every render. " +

            "To fix this, wrap the initialization of 'foo' in its own useMemo() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Foo() {
```
```
          const foo = <>Hi!</>;
```
```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' JSX fragment 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 Foo() {
```
```
          const foo = <div>Hi!</div>;
```
```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' JSX element 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 Foo() {
```
```
          const foo = bar = {};
```
```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' assignment expression 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 Foo() {
```

          const foo = new String('foo'); // Note 'foo' will be boxed, and thus an object and thus compared by reference.

```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object construction 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 Foo() {
```
```
          const foo = new Map([]);
```
```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object construction 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 Foo() {
```
```
          const foo = /reg/;
```
```
          useMemo(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' regular expression 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 Foo() {
```
```
          class Bar {};
```
```
          useMemo(() => {
```
```
            console.log(new Bar());
```
```
          }, [Bar]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'Bar' class makes the dependencies of useMemo Hook (at line 6) change on every render. " +

            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'Bar' in its own useMemo() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Foo() {
```
```
          const foo = {};
```
```
          useLayoutEffect(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
          useEffect(() => {
```
```
            console.log(foo);
```
```
          }, [foo]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useLayoutEffect Hook (at line 6) change on every render. " +

            "To fix this, wrap the initialization of 'foo' in its own useMemo() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
        {
```
```
          message:
```

            "The 'foo' object makes the dependencies of useEffect Hook (at line 9) change on every render. " +

            "To fix this, wrap the initialization of 'foo' in its own useMemo() Hook.",

```
          suggestions: undefined,
```
```
        },
```
```
      ],
```
```
    },
```
```
  ],
```
```
};
```
```
if (__EXPERIMENTAL__) {
```
```
  tests.valid = [
```
```
    ...tests.valid,
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ theme }) {

          const onStuff = useEffectEvent(() => {

```
            showNotification(theme);
```
```
          });
```
```
          useEffect(() => {
```
```
            onStuff();
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
  ];
```
```
  tests.invalid = [
```
```
    ...tests.invalid,
```
```
    {
```
```
      code: normalizeIndent`
```

        function MyComponent({ theme }) {

          const onStuff = useEffectEvent(() => {

```
            showNotification(theme);
```
```
          });
```
```
          useEffect(() => {
```
```
            onStuff();
```
```
          }, [onStuff]);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +

            'Remove `onStuff` from the list.',

```
          suggestions: [
```
```
            {
```

              desc: 'Remove the dependency `onStuff`',

```
              output: normalizeIndent`
```

                function MyComponent({ theme }) {

                  const onStuff = useEffectEvent(() => {

                    showNotification(theme);

```
                  });
```
```
                  useEffect(() => {
```
```
                    onStuff();
```
```
                  }, []);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
  ];
```
```
}
```

// Tests that are only valid/invalid across parsers supporting Flow

```
const testsFlow = {
```
```
  valid: [
```

    // Ignore Generic Type Variables for arrow functions

```
    {
```
```
      code: normalizeIndent`
```
```
        function Example({ prop }) {
```

          const bar = useEffect(<T>(a: T): Hello => {

```
            prop();
```
```
          }, [prop]);
```
```
        }
```
```
      `,
```
```
    },
```
```
  ],
```
```
  invalid: [
```
```
    {
```
```
      code: normalizeIndent`
```
```
      function Foo() {
```
```
        const foo = ({}: 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,
```
```
        },
```
```
      ],
```
```
    },
```
```
  ],
```
```
};
```

// Tests that are only valid/invalid across parsers supporting TypeScript

```
const testsTypescript = {
```
```
  valid: [
```
```
    {
```

      // `ref` is still constant, despite the cast.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          const ref = useRef() as React.MutableRefObject<HTMLDivElement>;

```
          useEffect(() => {
```
```
            console.log(ref.current);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          const [state, setState] = React.useState<number>(0);

```
          useEffect(() => {
```

            const someNumber: typeof state = 2;

            setState(prevState => prevState + someNumber);

```
          }, [])
```
```
        }
```
```
      `,
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function App() {
```
```
          const foo = {x: 1};
```
```
          React.useEffect(() => {
```
```
            const bar = {x: 2};
```

            const baz = bar as typeof foo;

```
            console.log(baz);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
    },
```
```
  ],
```
```
  invalid: [
```
```
    {
```

      // `local` is still non-constant, despite the cast.

```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const local = {} as string;
```
```
          useEffect(() => {
```
```
            console.log(local);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'local'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [local]',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const local = {} as string;

```
                  useEffect(() => {
```

                    console.log(local);

```
                  }, [local]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function App() {
```
```
          const foo = {x: 1};
```
```
          const bar = {x: 2};
```
```
          useEffect(() => {
```

            const baz = bar as typeof foo;

```
            console.log(baz);
```
```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'bar'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [bar]',

```
              output: normalizeIndent`
```
```
                function App() {
```
```
                  const foo = {x: 1};
```
```
                  const bar = {x: 2};
```
```
                  useEffect(() => {
```

                    const baz = bar as typeof foo;

```
                    console.log(baz);
```
```
                  }, [bar]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const pizza = {};
```
```
          useEffect(() => ({
```
```
            crust: pizza.crust,
```
```
            toppings: pizza?.toppings,
```
```
          }), []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has missing dependencies: 'pizza.crust' and 'pizza?.toppings'. " +

            'Either include them or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [pizza.crust, pizza?.toppings]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const pizza = {};
```
```
                  useEffect(() => ({
```

                    crust: pizza.crust,

                    toppings: pizza?.toppings,

                  }), [pizza.crust, pizza?.toppings]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const pizza = {};
```
```
          useEffect(() => ({
```
```
            crust: pizza?.crust,
```

            density: pizza.crust.density,

```
          }), []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'pizza.crust'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [pizza.crust]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const pizza = {};
```
```
                  useEffect(() => ({
```

                    crust: pizza?.crust,

                    density: pizza.crust.density,

```
                  }), [pizza.crust]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const pizza = {};
```
```
          useEffect(() => ({
```
```
            crust: pizza.crust,
```

            density: pizza?.crust.density,

```
          }), []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'pizza.crust'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [pizza.crust]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const pizza = {};
```
```
                  useEffect(() => ({
```

                    crust: pizza.crust,

                    density: pizza?.crust.density,

```
                  }), [pizza.crust]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```
```
          const pizza = {};
```
```
          useEffect(() => ({
```
```
            crust: pizza?.crust,
```

            density: pizza?.crust.density,

```
          }), []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'pizza?.crust'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [pizza?.crust]',

```
              output: normalizeIndent`
```

                function MyComponent() {

```
                  const pizza = {};
```
```
                  useEffect(() => ({
```

                    crust: pizza?.crust,

                    density: pizza?.crust.density,

```
                  }), [pizza?.crust]);
```
```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    // Regression test.
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example(props) {
```
```
          useEffect(() => {
```
```
            let topHeight = 0;
```

            topHeight = props.upperViewHeight;

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props.upperViewHeight'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props.upperViewHeight]',

```
              output: normalizeIndent`
```

                function Example(props) {

```
                  useEffect(() => {
```
```
                    let topHeight = 0;
```

                    topHeight = props.upperViewHeight;

                  }, [props.upperViewHeight]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    // Regression test.
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function Example(props) {
```
```
          useEffect(() => {
```
```
            let topHeight = 0;
```

            topHeight = props?.upperViewHeight;

```
          }, []);
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'props?.upperViewHeight'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [props?.upperViewHeight]',

```
              output: normalizeIndent`
```

                function Example(props) {

```
                  useEffect(() => {
```
```
                    let topHeight = 0;
```

                    topHeight = props?.upperViewHeight;

                  }, [props?.upperViewHeight]);

```
                }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          const [state, setState] = React.useState<number>(0);

```
          useEffect(() => {
```

            const someNumber: typeof state = 2;

            setState(prevState => prevState + someNumber + state);

```
          }, [])
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useEffect has a missing dependency: 'state'. " +

            'Either include it or remove the dependency array. ' +

            `You can also do a functional update 'setState(s => ...)' ` +

            `if you only need 'state' in the 'setState' call.`,

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [state]',

```
              output: normalizeIndent`
```
```
              function MyComponent() {
```

                const [state, setState] = React.useState<number>(0);

```
                useEffect(() => {
```

                  const someNumber: typeof state = 2;

                  setState(prevState => prevState + someNumber + state);

```
                }, [state])
```
```
              }
```
```
              `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      code: normalizeIndent`
```
```
        function MyComponent() {
```

          const [state, setState] = React.useState<number>(0);

```
          useMemo(() => {
```

            const someNumber: typeof state = 2;

```
            console.log(someNumber);
```
```
          }, [state])
```
```
        }
```
```
      `,
```
```
      errors: [
```
```
        {
```
```
          message:
```

            "React Hook useMemo has an unnecessary dependency: 'state'. " +

            'Either exclude it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: []',

```
              output: normalizeIndent`
```

                function MyComponent() {

                  const [state, setState] = React.useState<number>(0);

```
                  useMemo(() => {
```

                    const someNumber: typeof state = 2;

                    console.log(someNumber);

```
                  }, [])
```
```
                }
```
```
                `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
    {
```
```
      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,
```
```
        },
```
```
      ],
```
```
    },
```
```
  ],
```
```
};
```

// Tests that are only valid/invalid for `@typescript-eslint/[email protected]`

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:
```

            "React Hook React.useEffect has a missing dependency: 'Component'. " +

            'Either include it or remove the dependency array.',

```
          suggestions: [
```
```
            {
```

              desc: 'Update the dependencies array to be: [Component]',

```
              output: normalizeIndent`
```

              function Foo({ Component }) {

                React.useEffect(() => {

                  console.log(<Component />);

```
                }, [Component]);
```
```
              };
```
```
            `,
```
```
            },
```
```
          ],
```
```
        },
```
```
      ],
```
```
    },
```
```
  ],
```
```
};
```
```
// For easier local testing
```
```
if (!process.env.CI) {
```
```
  let only = [];
```
```
  let skipped = [];
```
```
  [
```
```
    ...tests.valid,
```
```
    ...tests.invalid,
```
```
    ...testsFlow.valid,
```
```
    ...testsFlow.invalid,
```
```
    ...testsTypescript.valid,
```
```
    ...testsTypescript.invalid,
```

    ...testsTypescriptEslintParserV4.valid,

    ...testsTypescriptEslintParserV4.invalid,

```
  ].forEach(t => {
```
```
    if (t.skip) {
```
```
      delete t.skip;
```
```
      skipped.push(t);
```
```
    }
```
```
    if (t.only) {
```
```
      delete t.only;
```
```
      only.push(t);
```
```
    }
```
```
  });
```
```
  const predicate = t => {
```
```
    if (only.length > 0) {
```
```
      return only.indexOf(t) !== -1;
```
```
    }
```
```
    if (skipped.length > 0) {
```

      return skipped.indexOf(t) === -1;

```
    }
```
```
    return true;
```
```
  };
```

  tests.valid = tests.valid.filter(predicate);

  tests.invalid = tests.invalid.filter(predicate);

  testsFlow.valid = testsFlow.valid.filter(predicate);

  testsFlow.invalid = testsFlow.invalid.filter(predicate);

  testsTypescript.valid = testsTypescript.valid.filter(predicate);

  testsTypescript.invalid = testsTypescript.invalid.filter(predicate);

```
}
```
```
describe('react-hooks', () => {
```
```
  const parserOptions = {
```
```
    ecmaFeatures: {
```
```
      jsx: true,
```
```
    },
```
```
    ecmaVersion: 6,
```
```
    sourceType: 'module',
```
```
  };
```
```
  const testsBabelEslint = {
```

    valid: [...testsFlow.valid, ...tests.valid],

    invalid: [...testsFlow.invalid, ...tests.invalid],

```
  };
```
```
  new ESLintTester({
```

    parser: require.resolve('babel-eslint'),

```
    parserOptions,
```

  }).run('parser: babel-eslint', ReactHooksESLintRule, testsBabelEslint);

```
  new ESLintTester({
```

    parser: require.resolve('@babel/eslint-parser'),

```
    parserOptions,
```
```
  }).run(
```
```
    'parser: @babel/eslint-parser',
```
```
    ReactHooksESLintRule,
```
```
    testsBabelEslint
```
```
  );
```

  const testsTypescriptEslintParser = {

    valid: [...testsTypescript.valid, ...tests.valid],

    invalid: [...testsTypescript.invalid, ...tests.invalid],

```
  };
```
```
  new ESLintTester({
```

    parser: require.resolve('@typescript-eslint/parser-v2'),

```
    parserOptions,
```
```
  }).run(
```

    'parser: @typescript-eslint/[email protected]',

```
    ReactHooksESLintRule,
```
```
    testsTypescriptEslintParser
```
```
  );
```
```
  new ESLintTester({
```

    parser: require.resolve('@typescript-eslint/parser-v3'),

```
    parserOptions,
```
```
  }).run(
```

    'parser: @typescript-eslint/[email protected]',

```
    ReactHooksESLintRule,
```
```
    testsTypescriptEslintParser
```
```
  );
```
```
  new ESLintTester({
```

    parser: require.resolve('@typescript-eslint/parser-v4'),

```
    parserOptions,
```

  }).run('parser: @typescript-eslint/[email protected]', ReactHooksESLintRule, {

```
    valid: [
```

      ...testsTypescriptEslintParserV4.valid,

      ...testsTypescriptEslintParser.valid,

```
    ],
```
```
    invalid: [
```

      ...testsTypescriptEslintParserV4.invalid,

      ...testsTypescriptEslintParser.invalid,

```
    ],
```
```
  });
```
```
  new ESLintTester({
```

    parser: require.resolve('@typescript-eslint/parser-v5'),

```
    parserOptions,
```

  }).run('parser: @typescript-eslint/parser@^5.0.0-0', ReactHooksESLintRule, {

```
    valid: [
```

      ...testsTypescriptEslintParserV4.valid,

      ...testsTypescriptEslintParser.valid,

```
    ],
```
```
    invalid: [
```

      ...testsTypescriptEslintParserV4.invalid,

      ...testsTypescriptEslintParser.invalid,

```
    ],
```
```
  });
```
```
});
```