Question

调用“内置”钩子之一时，react-hooks/exhaustive-deps规则非常聪明，可以识别出React保证某些返回值是不变的。由useState和useReducer挂钩返回的状态更新程序和分派器就是这种情况。

在第一个示例中，对useCallback的调用不需要将状态设置器列为依赖项：

export const Example1 = () => {
  const [date, setDate] = useState(new Date())

  const resetDate = useCallback(() => {
    setDate(new Date())
  }, []) // No need to list any dependency here. No eslint warning.

  return (
    <>
      Date: {date.toISOString()} <button onClick={resetDate}>Reset</button>
    </>
  )
}

但是在第二个示例中，setter是通过自定义钩子返回的，这是必需的。

const useDateState = (initialValue: Date) => {
  return useState(initialValue)
}

export const Example2 = () => {
  const [date, setDate] = useDateState(new Date())

  const resetDate = useCallback(() => {
    setDate(new Date())
  }, []) // ESLint complains: React Hook useCallback has a missing dependency: 'setDate'. Either include it or remove the dependency array.

  return (
    <>
      Date: {date.toISOString()} <button onClick={resetDate}>Reset</button>
    </>
  )
}

是否可以告诉eslint规则，我的自定义钩子返回的setter不会更改，并且不需要将其列为依赖项？这将有助于删除一些代码。

注意：我已经读过the React FAQ，this StackOverflow question，并且我了解添加不会改变的依赖关系不会降低性能。

但是由于内置的挂钩具有此行为，所以我想知道是否有一种方法可以使自定义挂钩相同。

如何让eslint react-hooks / exhaustive-deps规则知道自定义钩子的返回值是不变的？

0 个答案: