useMemo 和 debounced 函数的依赖项数组问题答案

【问题标题】：Dependencies array issue with useMemo and a debounced functionuseMemo 和 debounced 函数的依赖项数组问题
【发布时间】：2023-02-07 18:32:40
【问题描述】：

我有以下使用lodash.debounce的代码：

// Get Dimensions
// Capture dimensions when `App` first mounts, immediately
// Listen for resize events and trigger 'getDimensions' (debounced)
const getDimensions = () => dispatch(setDimensions({
    viewportWidth: window.innerWidth,
    viewportHeight: window.innerHeight
}))

const handleResize = useMemo(() =>
    debounce(getDimensions, 250)
, [getDimensions])

useEffect(() => {
    handleResize()
    window.addEventListener('resize', handleResize)
})

虽然这似乎有效，而且我可以在 Redux DevTools 上观察到我的去抖功能在正确的时间成功触发，但我在终端上收到 react-hooks/exhaustive-deps 错误：

The 'getDimensions' function makes the dependencies of useMemo Hook (at line 45) change on every render. Move it inside the useMemo callback. Alternatively, wrap the definition of 'getDimensions' in its own useCallback() Hook

如果我从 handleResize 中删除 getDimensions 和整个依赖项数组，它仍然有效但是我得到这个错误：

React Hook useMemo does nothing when called with only one argument. Did you forget to pass an array of dependencies?

我对依赖数组有点困惑。从逻辑的角度来看，据我所知，我不想要一个依赖数组 - 或者我想要一个空的（这也有效！) - 有人可以帮助我理解为什么我会收到此错误以及我可以做些什么来改进我的代码以使其干净无错误？

【问题讨论】：

标签： reactjs callback resize debouncing react-usememo

【解决方案1】：

为 linting 警告的任何内容添加修复，

 // Get Dimensions
  // Capture dimensions when `App` first mounts, immediately
  // Listen for resize events and trigger 'getDimensions' (debounced)
  const getDimensions = useCallback(
    () =>
      dispatch(
        setDimensions({
          viewportWidth: window.innerWidth,
          viewportHeight: window.innerHeight
        })
      ),
    [dispatch]
  );

  const handleResize = useMemo(() => debounce(getDimensions, 250), [
    getDimensions
  ]);

useCallback 如果任何引入的值/依赖数组值发生变化，将返回一个新的引用。 useMemo基于getDimensions版本（比较之前和最新的依赖）计算结果，允许重新渲染。

【讨论】：