Dependencies in useEffect

Question

I have two components. I pass handleCurrentAudioInputDeviceLabel to Publisher.js where I setCurrentAudioInputDeviceLabel. You can see that I am missing the dependency setCurrentAudioInputDeviceLabel in useEffect. However, as soon I add it my component starts to re-render more often.

I thought about useCallback, but once I tried that, my linter says I have to add more than just currentAudioInputDeviceLabel.

VideoMeeting.js

const handleCurrentAudioInputDeviceLabel = (currentAudioInputDeviceLabel) => {
  setCurrentAudioInputDeviceLabel(currentAudioInputDeviceLabel);
};

<Publisher
  setCurrentAudioInputDeviceLabel={
    handleCurrentAudioInputDeviceLabel
  }
/>

Publisher.js

useEffect(() => {
  // Prevent to set audio source before publisher exists
  if (!publisherRef.current) {
      return;
  }

  const handleError = (error) =>
      onError(error, INITIATOR_AUDIO_DEVICE_PUBLISHER);

  publisherRef.current
      .setAudioSource(currentAudioInputDevice.deviceId)
      .then(() => {
      setCurrentAudioInputDeviceLabel(currentAudioInputDevice.label);
      })
      .catch((error) => {
      handleError(error);
      });
}, [currentAudioInputDevice, onError]);

[How to fix missing dependency warning when using useEffect React Hook?](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook/55854902#55854902) should help you — Shubham Khatri, May 19 '20 at 10:26
You can use useCallback like`const handleCurrentAudioInputDeviceLabel = useCallback((currentAudioInputDeviceLabel) => { setCurrentAudioInputDeviceLabel(currentAudioInputDeviceLabel); },[setCurrentAudioInputDeviceLabel]);` and then add `setCurrentAudioInputDeviceLabel` as a dependency to useEffect in child. However if you are absolute sure about what you want, you can disable the warning — Shubham Khatri, May 19 '20 at 10:28

Dependencies in useEffect

0 Answers0