1

当您调用“内置”钩子之一时，该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 不会改变，并且不需要将其列为依赖项？这将有助于删除一些代码。

注意：我已经阅读了 React 常见问题解答，这个 StackOverflow 问题，并且我知道添加不会改变的依赖项没有性能成本。

但由于这种行为可用于内置钩子，我想知道是否有办法为自定义钩子获得相同的效果。

4

0 回答 0