React组件中useEffect依赖缺失及useCallback引发的重渲染问题咨询

我明白你遇到的困境了——既要满足ESLint的依赖项要求，又要避免组件因为方法引用频繁变化而不必要地重渲染。咱们一步步来解决这个问题：

步骤1：用useCallback稳定父组件的方法引用 #

在VideoMeeting.js中，你需要用useCallback包裹handleCurrentAudioInputDeviceLabel，确保它的引用在组件重渲染时保持稳定。因为useState返回的setter函数（setCurrentAudioInputDeviceLabel）在组件生命周期内是固定不变的，所以它作为依赖不会导致函数频繁重建：

import { useCallback } from 'react';

// ... 其他代码

const handleCurrentAudioInputDeviceLabel = useCallback((currentAudioInputDeviceLabel) => {
  setCurrentAudioInputDeviceLabel(currentAudioInputDeviceLabel);
}, [setCurrentAudioInputDeviceLabel]); // useState的setter是稳定依赖，无需担心频繁更新

<Publisher setCurrentAudioInputDeviceLabel={handleCurrentAudioInputDeviceLabel} />

步骤2：在子组件中正确添加依赖项 #

在Publisher.js里，把父组件传递过来的setCurrentAudioInputDeviceLabel添加到useEffect的依赖数组中。现在因为这个方法的引用已经被useCallback稳定住了，不会因为父组件重渲染而频繁变化，所以不会导致useEffect不必要地重复执行：

import { useEffect, useRef } from 'react';

// ... 其他代码，比如解构props：
const Publisher = ({ setCurrentAudioInputDeviceLabel, onError }) => {
  const publisherRef = useRef(null);
  // 假设currentAudioInputDevice是组件内的state或props

  useEffect(() => {
    if (!publisherRef.current) {
      return;
    }
    const handleError = (error) => onError(error, INITIATOR_AUDIO_DEVICE_PUBLISHER);
    publisherRef.current
      .setAudioSource(currentAudioInputDevice.deviceId)
      .then(() => {
        // 调用父组件传递的方法更新label
        setCurrentAudioInputDeviceLabel(currentAudioInputDevice.label);
      })
      .catch((error) => {
        handleError(error);
      });
  }, [currentAudioInputDevice, onError, setCurrentAudioInputDeviceLabel]); // 添加稳定后的方法作为依赖

  // ... 组件其他逻辑
};

为什么这样能解决问题？ #

• useCallback的作用是缓存函数引用，只有当依赖数组中的内容发生变化时，才会生成新的函数。这里依赖的setCurrentAudioInputDeviceLabel是useState的setter，它的引用在组件整个生命周期中都是固定的，所以这个函数几乎不会重建。
• 子组件Publisher接收的setCurrentAudioInputDeviceLabelprops现在是稳定的，不会因为父组件重渲染而变化，因此子组件不会出现不必要的重渲染。
• 同时满足了ESLint对useEffect依赖项的要求，消除了警告，代码也更加健壮。

如果之前你用useCallback时收到了额外的依赖提示，大概率是因为你的handleCurrentAudioInputDeviceLabel内部用到了其他变量（比如currentAudioInputDeviceLabel）。如果确实有这种情况，只需要把那个变量也加入useCallback的依赖数组即可——这是合理的，因为函数逻辑依赖了该变量的最新值。

内容的提问来源于stack exchange，提问作者Joey Coder