UseEffect throwing Warning for useState

Question

Hello Guys I am getting this warning

React Hook useEffect has missing dependencies: 'financialBackground' and 'setFinancialBackground'. Either include them or remove the dependency array. If 'setFinancialBackground' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps

This is my Code for useEffect.

useEffect(() => {
    if ((pastRevYear, pastRev)) {
      let objRev;
      objRev = { pastRevYear, pastRev };
      let input = [];
      const check = { ...financialBackground };
      for (let i in check) {
        const item = check[i];
        if (i === "pastRev") {
          for (let j in item) {
            const jitem = item[j];
            if (jitem) {
              input.push(jitem);
            }
          }
        }
      }
      input = [...input, objRev];
      setFinancialBackground({
        ...financialBackground,
        pastRev: input,
      });
    }
  }, [pastRev, pastRevYear]);

I defined useState like this in parent Component.

 const [financialBackground, setFinancialBackground] = useState({
    fundingMethod: props.data
      ? props.data.financialBackground.fundingMethod
      : "",
    otherFundingMethod: props.data
      ? props.data.financialBackground.otherFundingMethod
      : "",
    pastRev: props.data ? props.data.financialBackground.pastRev : "",
    pastExp: props.data ? props.data.financialBackground.pastExp : "",
  });

If I put setFinancialBackground in dependency Array it re renders the state multiple times.

I want to use "setFinancialBackground" everyTiime "pastRev" and "pastRevYear" change without deleting previous data in state. — Tahmass Raheem, Nov 24 '21 at 07:33

score 0 · Answer 1 · answered Nov 24 '21 at 07:34

This is because you are not using the dependencies in useEffect hoook. You are changing financialBackground and hence it should be added to useEffect hook like below

useEffect(() => {
    if ((pastRevYear, pastRev)) {
      let objRev;
      objRev = { pastRevYear, pastRev };
      let input = [];
      const check = { ...financialBackground };
      for (let i in check) {
        const item = check[i];
        if (i === "pastRev") {
          for (let j in item) {
            const jitem = item[j];
            if (jitem) {
              input.push(jitem);
            }
          }
        }
      }
      input = [...input, objRev];
      setFinancialBackground({
        ...financialBackground,
        pastRev: input,
      });
    }
  }, [pastRev, pastRevYear, setFinancialBackground, financialBackground]);

I know. I did this also it invokes useEffect infinite times. I have also put this in question. see last line of my question — Tahmass Raheem, Nov 24 '21 at 09:28

score 0 · Answer 2 · answered Nov 28 '21 at 15:18

It doesn't feel good that the child is updating the parent value this way.

Try instead:

Child

useEffect(() => {
  if ((pastRevYear, pastRev)) {
    // get objRev 
    setRev(objRev);
  }
}, [pastRev, pastRevYear, setRev]);

Parent

const financialBackground = useRef();
const [rev, setRev] = useState();

useEffect(() => {
  // do the rev check here on financialBackground.current then
  financialBackground.current = /* ... */
}, [rev]);

```

UseEffect throwing Warning for useState

2 Answers2

Child

Parent