Passing non-primitives as dependencies to useEffect

Ok, this is something that puzzles me, it might be a lengthy discussion or might have a quick solve, I don't know.

Do NOT pass non-primitives like arrays, objects, functions, in the useEffect dependency array.

Passing whole object/ array this way could trigger unnecessary re-renders.

This is what I've read in quite few posts on LinkedIn but no clear solution offered, apart from really knowing what data to pass.

While useCallback might solve the issue for a function being passed as dependency, it's trickier when it comes to objects and arrays.

@Cristian Florea

or someone else who has more info and experience about this, maybe shed some light on this topic.

So when I get the coins from the redux store and set state in my component with a useEffect, as I did for instance in my CoinsTable component, apparently its wrong passing data from redux as dependency array.

is it?

So every time data changes due to change of parameters passed to the api endpoint, useEffect is triggered.

What would be a solution for this?

I'm thinking either implementing a custom hook instead of using useEffect in the component or memoizing the data.

EDIT: this would have the same effect as useEffect, imo.

I find this part of react the trickiest and hardest to get, tbh.

I'm curious to what other people think.

If you find some good resources / articles, please share.

3 comments

Developer Pro

skool.com/developerpro

Learn how to code. Make money. Have fun. Enjoy life.

Leaderboard (30-day)

+47

+41

Prudhvi Raj Maddukuri

+37

Selina Lavery

+35

Martynas Astravas

+26