fix react-hooks/exhaustive-deps errors

[steida]

React Hook useEffect has missing dependencies: 'hasNextValue', 'ms', and 'nextValue'. Either include them or remove the dependency array.eslint(react-hooks/exhaustive-deps)

[steida]

I see the project is using deprecated tslint instead of eslint. Not using react-hooks/exhaustive-deps is very dangerous. I will send PR.

[steida]

Ups.

/Users/steida/dev/react-use/src/createMemo.ts
  4:45  error  React Hook useMemo 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  react-hooks/exhaustive-deps
  4:45  error  React Hook useMemo has a missing dependency: 'args'. Either include it or remove the dependency array                                                               react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/createReducer.ts
  27:6  error  React Hook useMemo 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  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useAsyncFn.ts
  54:6  error  React Hook useCallback 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                                                                 react-hooks/exhaustive-deps
  54:6  error  React Hook useCallback has missing dependencies: 'fn' and 'mounted'. Either include them or remove the dependency array. If 'fn' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useAsyncRetry.ts
  23:6  error  React Hook useCallback has an unnecessary dependency: 'attempt'. Either exclude it or remove the dependency array                                          react-hooks/exhaustive-deps
  23:7  error  React Hook useCallback has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useBattery.ts
  37:19  error  Assignments to the 'battery' 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  react-hooks/exhaustive-deps
  43:17  error  Assignments to the 'mounted' 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  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useCopyToClipboard.ts
  48:6  error  React Hook useCallback has missing dependencies: 'mounted' and 'setState'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useCounter.ts
  14:70  error  React Hook useCallback has missing dependencies: 'get' and 'set'. Either include them or remove the dependency array                                                                                                                                                                               react-hooks/exhaustive-deps
  15:63  error  React Hook useCallback has a missing dependency: 'inc'. Either include it or remove the dependency array                                                                                                                                                                                           react-hooks/exhaustive-deps
  17:20  error  Assignments to the 'initialValue' variable from inside React Hook useCallback 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 useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useDebounce.ts
  11:6  error  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  react-hooks/exhaustive-deps
  11:6  error  React Hook useEffect has missing dependencies: 'args', 'fn', and 'ms'. Either include them or remove the dependency array                                             react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useDrop.ts
   61:66  error  React Hook useMemo has missing dependencies: 'mounted' and 'options'. Either include them or remove the dependency array                                 react-hooks/exhaustive-deps
  109:6   error  React Hook useEffect has missing dependencies: 'onText' and 'setOver'. Either include them or remove the dependency array                                react-hooks/exhaustive-deps
  109:16  error  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  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useDropArea.ts
  81:66  error  React Hook useMemo has missing dependencies: 'mounted' and 'options'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useEvent.ts
  37:6   error  React Hook useEffect has a missing dependency: 'options'. Either include it or remove the dependency array                                react-hooks/exhaustive-deps
  37:30  error  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useFullscreen.ts
  65:15  error  The ref value 'video.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'video.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps
  68:6   error  React Hook useLayoutEffect has missing dependencies: 'onClose' and 'ref'. Either include them or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component            react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useGeolocation.ts
  51:15  error  Assignments to the 'watchId' 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  react-hooks/exhaustive-deps
  54:17  error  Assignments to the 'mounted' 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  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useGetSet.ts
  11:6  error  React Hook useCallback has a missing dependency: 'update'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useGetSetState.ts
  25:6  error  React Hook useCallback has a missing dependency: 'update'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useHoverDirty.ts
  25:13  error  The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useIdle.ts
  51:6  error  React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useKey.ts
  33:6  error  React Hook useMemo 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                                                             react-hooks/exhaustive-deps
  33:6  error  React Hook useMemo has missing dependencies: 'fn' and 'key'. Either include them or remove the dependency array. If 'fn' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useLifecycles.ts
  13:6  error  React Hook useEffect has missing dependencies: 'mount' and 'unmount'. Either include them or remove the dependency array. If 'mount' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useLocalStorage.ts
   9:29  error  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?   react-hooks/rules-of-hooks
  26:3   error  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks

/Users/steida/dev/react-use/src/useMethods.ts
  19:6  error  React Hook useMemo has missing dependencies: 'createMethods' and 'initialState'. Either include them or remove the dependency array. If 'createMethods' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useMouse.ts
  65:6  error  React Hook useEffect has a missing dependency: 'ref'. Either include it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useNetwork.ts
  83:6  error  React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useOrientation.ts
  45:6  error  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array. If 'setState' needs the current value of 'initialState', you can also switch to useReducer instead of useState and read 'initialState' in the reducer  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/usePageLeave.ts
  21:6  error  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                                                                   react-hooks/exhaustive-deps
  21:6  error  React Hook useEffect has a missing dependency: 'onPageLeave'. Either include it or remove the dependency array. If 'onPageLeave' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/usePromise.ts
  23:5  error  React Hook useCallback has a missing dependency: 'refMounted'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useScroll.ts
  48:13  error  The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps
  51:6   error  React Hook useEffect has a missing dependency: 'ref'. Either include it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component                              react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useSessionStorage.ts
   9:29  error  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?   react-hooks/rules-of-hooks
  26:3   error  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks

/Users/steida/dev/react-use/src/useSize.tsx
  22:29  error  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render                                                                                                                                                              react-hooks/rules-of-hooks
  29:15  error  React Hook "useRef" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?                                                                                                 react-hooks/rules-of-hooks
  47:3   error  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?                                                                                              react-hooks/rules-of-hooks
  50:16  error  Assignments to the 'window' 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  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useSpring.ts
  28:6  error  React Hook useEffect has missing dependencies: 'spring' and 'targetValue'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  34:6  error  React Hook useEffect has a missing dependency: 'spring'. Either include it or remove the dependency array                      react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useStartTyping.ts
  52:6  error  React Hook useLayoutEffect has a missing dependency: 'onStartTyping'. Either include it or remove the dependency array. If 'onStartTyping' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useThrottle.ts
  27:6  error  React Hook useEffect has missing dependencies: 'hasNextValue', 'ms', and 'nextValue'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

/Users/steida/dev/react-use/src/useThrottleFn.ts
  27:6  error  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                                                                                                react-hooks/exhaustive-deps
  27:6  error  React Hook useEffect has missing dependencies: 'args', 'fn', 'hasNextArgs', 'ms', and 'nextArgs'. Either include them or remove the dependency array. If 'fn' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

✖ 55 problems (55 errors, 0 warnings)
  29 errors and 0 warnings potentially fixable with the `--fix` option.

[drianoaz]

guys, is anyone looking at this? 👀

[JoeDuncko]

Hi! @react-hookz/web, the new library by one of react-use's former maintainers (background here and here) has been built to much higher standards than react-use. It might be worth taking a look.

For those interested, there's an official migration guide for migrating from react-use to @react-hookz/web.