Function as dependency react-typescript

Question

Hello I Have a problem function as dependency breaks the app. The problem is that my IDE throws and error when I have no getIngredientValues in useCallback dependencies. What to do?

const ingredientValFunc = useCallback(
    (ingredient: ingredient, isValid: boolean, isWrong: boolean) => {
      getIngredientValues({
        values: ingredient,
        isClicked: isClicked,
        isValid: isValid,
        isWrong: isWrong,
      });
    },
    [isClicked]
  );

  useEffect(() => {
    const ingredient = {
      name: ingredientName,
      amount: ingredientAmount,
      unit: ingredientUnit,
    };
    let isValid = ingredientName.length > 0;

    let isWrong = isClicked && ingredientName.length === 0;
    ingredientValFunc(ingredient, isValid, isWrong);
  }, [
    ingredientName,
    ingredientAmount,
    ingredientUnit,
    isClicked,
    ingredientValFunc,
  ]);

Answer 1

I think that is a warning given by IDE. You can disable them by adding // eslint-disable-next-line react-hooks/exhaustive-deps

const ingredientValFunc = useCallback(
  (ingredient: ingredient, isValid: boolean, isWrong: boolean) => {
    getIngredientValues({
      values: ingredient,
      isClicked: isClicked,
      isValid: isValid,
      isWrong: isWrong,
    });
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [isClicked]
);