useEffect has missing dependency leads to another error

Question

The following code gives the "useEffect has a missing dependency" error:

  useEffect(() => {
    inputToOutput();
  }, [sortalphaStatus, sorttypeStatus]);

So I change it to this:

  useEffect(() => {
    inputToOutput();
  }, [sortalphaStatus, sorttypeStatus, inputToOutput]);

But now I get this error: "The 'inputToOutput' function makes the dependencies of useEffect Hook (at line 363) change on every render. To fix this, wrap the definition of 'inputToOutput' in its own useCallback() Hook"

My function being called is in this format:

   const inputToOutput = e => {
    inputTextTmp = inputText;
    blah blah;
   };

I've no idea what to do about this. I wanted to use a callback function when setting state in my functional component but understand that is not possible, so I have used a useEffect hook. But now I get these errors that I cannot overcome.

Any suggestions?

Please show a full reproducible example, not snippets, see [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Dennis Vash, Feb 10 '21 at 13:35
Doesn't https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook answer your question? — Zoltan Magyar, Feb 10 '21 at 13:50

Lakshya Thakur · Answer 1 · 2021-02-10T13:55:45.237

0

It's telling you to wrap your inputToOutput like so :-

 const inputToOutput = useCallBack((e) => {
    inputTextTmp = inputText;
    blah blah;
   },[]);

Now that [] could have dependencies which currently I can't infer from the stated code.

The reason it's telling you to do this is because in each render a fresh inputToOutput function gets created i.e. a new object altogether which if passed as a dependency to useEffect will cause a render again which will again create a new function and so .....on

edited Feb 10 '21 at 13:55

answered Feb 10 '21 at 13:40

Lakshya Thakur

8,030
1
12
39

I've added the useCallBack but now I get another error: "Assignments to the 'inputTextTmp' variable from inside React Hook useCallback will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useCallback". This whole problem is stemming from the fact I want to set two state variables and then run a function that depends on those state variables. But The stuff I read said I needed useEffect. Is there another way to do this? – Jon Feb 10 '21 at 14:24
I am going to put inputTextTmp as a state and test that. – Jon Feb 10 '21 at 15:09

score 0 · Answer 2 · answered Feb 10 '21 at 13:43

0

Wrap your function in useCallback() hook:

const inputToOutput = useCallback((e) => {
    inputTextTmp = inputText;
    blah blah;
}, []);

 useEffect(() => {
    inputToOutput();
 }, [sortalphaStatus, sorttypeStatus, inputToOutput]);

answered Feb 10 '21 at 13:43

Ahmed Jafri

49
4

score 0 · Answer 3 · answered Feb 10 '21 at 13:50

The first warning caused because if you are calling a function inside useEffect usually you will want to call useEffect when it gets updated. Now, the second warning is because every time your component renders the function returns a different function object and then your useEffect will be fired every time (useEffect fired when it noticed one of its dependencies got changed), so to avoid that you need to wrap your function with useCallback so the function will be the same.

useEffect has missing dependency leads to another error

3 Answers3