React hook has an unnecessary dependency

Question

hello i'm getting this :

React Hook useCallback has an unnecessary dependency: 'product.selectedFilesVideos'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps

my state:

const [product, setProduct] = useState({
     .......
    selectedFilesVideos: [],
     .......
  });

my function :

  const addSelectedFilesVideos = useCallback(
    (files) => {
      setProduct((prevProduct) => {
        return { ...prevProduct, selectedFilesVideos: files };
      });
    },
    [product.selectedFilesVideos]
  );

where i use it :

<FileManger
  addSelectedFiles={addSelectedFilesVideos}
  selectFiles={product.selectedFilesVideos}
  acceptFormat="video/*"
  videoOrPics="Drop video files here or click to upload."
/>

Answer 1

You pass to dependency array product.selectedFilesVideos which is not used in the function of useCallback . This array is used to call useCallback and update function when one of the dependency was updated.

That's why there is the React warning.

For more info: https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 2

You can work out the warning by removing product.selectedFilesVideos from the dependency array of the 'useCallback'. Since there is no actual dependency in this array for the callback hook, it should still work as expected and it will fix your warning.

 const addSelectedFilesVideos = useCallback(
    (files) => {
      setProduct((prevProduct) => {
        return { ...prevProduct, selectedFilesVideos: files };
      });
    },
    []
  );