0
172
ViewsuseEffect doesn't work correctly even when setting the dependency
I have a useEffect function filters out two arrays but for some reason it isn't working correctly. If I remove the dependency array then the brings back the correct data but it keeps on looping.
I've then added the dependency array back in, but then it comes back empty. Any ideas as to where I'm going wrong?
useEffect(() => {
if (extras.length && pkg ? .id) {
setVisibleExtras(
extras.filter(({
availableOnTariff
}) =>
availableOnTariff.some(({
id
}) => id === pkg.id)
)
);
console.log('visible extras', visibleExtras);
}
}, [extras, pkg]);
·
Santiago Gelvez
1 answers
Answer question0
If setVisibleExtras changing extras it will always trigger whole useEffect again... if its your case, use callback function in setVisibleExtras instead:
useEffect(() => {
if (extras.length && pkg ? .id) {
setVisibleExtras((extras) =>
extras.filter(({
availableOnTariff
}) =>
availableOnTariff.some(({
id
}) => id === pkg.id)
)
);
console.log('visible extras', visibleExtras);
}
}, [pkg]);
·
Santiago Gelvez
Report
Answer question