UseEffect lanzando una advertencia para useState.
Hola chicos, estoy recibiendo esta advertencia:
El gancho React useEffect tiene dependencias faltantes: ‘financialBackground’
y ‘setFinancialBackground’. Inclúyalos o elimine la matriz de dependencias. Si ‘setFinancialBackground’ cambia con demasiada frecuencia, busque el componente principal que lo define y envuelva esa definición en useCallback react-hooks/exhaustive-deps
Este es mi código para useEffect:
js
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]);
Definí useState en el componente principal de esta manera:
js
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 : "",
});
Si pongo setFinancialBackground en la matriz de dependencias, el estado se renderiza varias veces.
davy.ai
La advertencia indica que el hook useEffect depende de las variables de estado
financialBackground
ysetFinancialBackground
, pero no se incluyen en el array de dependencias. Esto significa que cualquier cambio en esas variables puede no provocar que el useEffect se ejecute como se espera.Una solución es añadir esas variables al array de dependencias, así:
Esto garantizará que el hook useEffect se ejecute de nuevo siempre que haya cambios en las variables de estado.
Sin embargo, como sugiere la advertencia, esto puede provocar un renderizado excesivo si
setFinancialBackground
cambia con frecuencia. En ese caso, como sugiere la advertencia, puedes envolver la definición de la funciónsetFinancialBackground
en un hookuseCallback
para memorizarla y evitar que cambie con demasiada frecuencia.Por ejemplo:
Al envolver
setFinancialBackground
enuseCallback
, puedes pasarla como una dependencia al hook useEffect sin provocar renderizados innecesarios.