React Hook useCallback has a missing dependency:

Question

Hello i'm getting this :

Line 82:5: React Hook useCallback has a missing dependency: 'product'. Either include it or remove the dependency array. You can also do a functional update 'setProduct(p => ...)' if you only need 'product' in the 'setProduct' call react-hooks/exhaustive-deps Line 95:5: React Hook useCallback has a missing dependency: 'product'. Either include it or remove the dependency array. You can also do a functional update 'setProduct(p => ...)' if you only need 'product' in the 'setProduct' call react-hooks/exhaustive-deps

this is my product state :

 const [product, setProduct] = useState({
    sku: "",
    description: "",
    unisex: true,
    woman: false,
    man: false,
    styles: [],
    materials: [],
    selectedFilesImages: [],
    selectedFilesVideos: [],
    name: "",
    discountPrice: "",
    categories: [],
    defaultPicture: [],
    shop: 0,
    variants: [],
    price: "",
  });

Here are my two functions that use useCallBack

 const addSelectedFilesImages = useCallback(
    (files) => {
      setProduct({ ...product, selectedFilesImages: files });
      console.log(product.selectedFilesImages);
    },
    [product.selectedFilesImages]
  );

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

here is my component to which i pass these functions

          <div className="col-sm-6">
              <FileManger
                addSelectedFiles={addSelectedFilesImages}
                selectFiles={product.selectedFilesImages}
                acceptFormat="image/*"
                videoOrPics="Drop files here or click to upload."
              />
            </div>
            <div className="col-sm-6">
              <FileManger
                addSelectedFiles={addSelectedFilesVideos}
                selectFiles={product.selectedFilesVideos}
                acceptFormat="video/*"
                videoOrPics="Drop video files here or click to upload."
              />
            </div>

If i put product in the dependency everytime product is updated also FileManger is rendered , FileManager is based on product.selectedFilesVideos or product.selectedFilesImages

Answer 1

This linter warning gives you an option at the end – since you only need the product piece of state inside the setProduct function of the useCallback hook that you should use the functional syntax of setProduct which passes in the previous product as an argument.

It should look something like this:

const addSelectedFilesImages = useCallback((files) => {
  setProduct((prevProduct) => { // pass an inline function to setProduct
    return {...prevProduct, selectedFilesImages: files}
  })
}, [])