useEffect warning when adding dependencies using spread operator

Asked Aug 22 '19 at 10:27

Active Aug 22 '19 at 10:27

Viewed 1,187 times

On passing the dependencies from array to the 2nd parameter of useEffect, eslint throws the following error

// inputs need to go as part of effects dependency
export function useEffectAsync(effect, inputs) { 
     useEffect(() => {
         effect();
     }, [...inputs, effect]);
}

React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies

Usage:

useEffectAsync(async () => {
        await dispatch(getData());
        // set something once data is available 
     }
 }, [dispatch]);

asked Aug 22 '19 at 10:27

Akshay Gundewar

1

What does `inputs` contain? – Chris Aug 22 '19 at 10:32
1

That's because the linter will check if a loop exists and that everything that is used within the hook triggers an update, if it changes. That is not possible with the spread parameter. You should be immutable and just add the whole array. – Domino987 Aug 22 '19 at 11:02
@Chris it contains dependencies if any required to be passed to the `useEffect` – Akshay Gundewar Aug 22 '19 at 11:25
@Domino987 But how can I add any other dependency apart from the passed ones? – Akshay Gundewar Aug 22 '19 at 11:28
@AkshayGundewar like what for example? – Domino987 Aug 22 '19 at 11:38

useEffect warning when adding dependencies using spread operator

0 Answers0