React useEffect missing dependency for a function?

Question

useEffect(() => {
    calculateTip();
  }, [bill, tipPercentage, numberOfPeople]);

  const calculateTip = () => {
    const tip = ((tipPercentage / 100) * bill).toFixed(2);
    const tipPerGroup = ((tipPercentage / 100) * bill * numberOfPeople).toFixed(
      2
    );
    setTipPerGroup(tipPerGroup);

    setTip(tip);
  };

I get an error:

React Hook useEffect has a missing dependency: 'calculateTip'. Either include it or remove the dependency array

Why does useEffect need to have a function in its dependency array? I mean the function never changes, it is the same same function, why does React force me to write it inside the dependency array?

Because it doesn't match the heuristics used to decide whether or not this is something that changes. In fact, if that function definition is inside the component, it does change - you create a new function (albeit with the same logic inside) on every render. — jonrsharpe
– jonrsharpe, Commented May 27, 2022 at 14:29

gmoniava · Accepted Answer · 2022-05-27 15:03:43Z

2

Why does useEffect need to have a function in its dependency array. I mean the function never changes . It is the same same function why does react force me to write it inside the dependency array?

If that function is defined inside the component then it is not the same function, on the contrary it is re-created on each render. But that is not much related to the reason for the warning.

The reason why that warning asks you to put the function as dependency is the same as for other variables. The function itself may be referencing some variables which may become stale.

edited May 27, 2022 at 15:03

answered May 27, 2022 at 14:30

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Amos Machora Over a year ago

Hey @GiorgiMoniava i have run into another error

The 'calculateTip' function makes the dependencies of useEffect Hook (at line 28) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'calculateTip' in its own useCallback()

Any ideas?

jonrsharpe Over a year ago

@AmosMachora that message gives you two options for solving the problem - did you try either of them?

Amos Machora Over a year ago

@jonrsharpe I honestly didn't understand anything that error said. I'm kind of a noob in react .

gmoniava Over a year ago

@AmosMachora Here is more reading: reactjs.org/docs/…

jonrsharpe Over a year ago

@AmosMachora one of those suggestions isn't specific to React. For the other did you consider reading about the useCallback hook?

|

Collectives™ on Stack Overflow

React useEffect missing dependency for a function?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related