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.
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]);
It doesn't feel good that the child is updating the parent value this way.
Try instead:
useEffect(() => {
if ((pastRevYear, pastRev)) {
// get objRev
setRev(objRev);
}
}, [pastRev, pastRevYear, setRev]);
const financialBackground = useRef();
const [rev, setRev] = useState();
useEffect(() => {
// do the rev check here on financialBackground.current then
financialBackground.current = /* ... */
}, [rev]);
```