Thread by @benmvp, Using objects/arrays in deps for React useEffect can cause it to run [...]

Ben Ilegbodu 🏀👨🏾‍💻

benmvp

Using objects/arrays in deps for React useEffect can cause it to run the effect on *every* re-render even if contents are the same cuz the references are different

We've got a couple of options...

Depend on the obj properties instead of the entire obj

/thread

Using objects/arrays in deps for React useEffect can cause it to run the effect on *every* re-render even if contents are the same cuz the references are differentWe've got a couple of options... Depend on the obj properties instead of the entire obj/thread

Duplicate the object within the effect when the *entire* object is needed. useEffect then depends on the pieces needed to create the object

In general creating object literals is cheap so the perf wins from optimized useEffect should outweigh the duplication

Duplicate the object within the effect when the *entire* object is needed. useEffect then depends on the pieces needed to create the objectIn general creating object literals is cheap so the perf wins from optimized useEffect should outweigh the duplication

Memoize/cache the object w/ useMemo Hook if creating the object is too expensive to do it twice. The obj is now safe to use in deps

This is suggested by the `react-hooks/exhaustive-deps` ESLint rule (part of `eslint-plugin-react-hooks` which you should totally be using)

Memoize/cache the object w/ useMemo Hook if creating the object is too expensive to do it twice. The obj is now safe to use in depsThis is suggested by the `react-hooks/exhaustive-deps` ESLint rule (part of `eslint-plugin-react-hooks` which you should totally be using)

Do it yourself by (ab)using useRef Hook when obj is passed as a prop & we still need the whole object in the effect. The ref will maintain "referential equality" and only change when the new vs old object do not deep equal

(the eslint rule will be very unhappy tho)

Do it yourself by (ab)using useRef Hook when obj is passed as a prop & we still need the whole object in the effect. The ref will maintain "referential equality" and only change when the new vs old object do not deep equal (the eslint rule will be very unhappy tho)

I go over these 4 options for optimizing the React useEffect Hook w/ object or array dependencies in greater detail in my latest post

Is this a problem that you've even run into?

Have you solved it w/ other methods?

https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/?utm_source=twitter&utm_medium=social&utm_campaign=init-share

Object & array dependencies in the React useEffect Hook | Ben Ilegbodu

Four options for optimizing the useEffect Hook with object or array dependencies

https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/?utm_source=twitter&utm_medium=social&utm_campaign=init-share

BTW if you enjoy this sort of content, don't miss out and subscribe to the BenMVP Newsletter

It's a weekly-ish frontend dev email where I share my posts about JS, TS, React, "divops" & more. Also notifications about my minishops & speaking engagements https://www.benmvp.com/subscribe/?utm_source=twitter&utm_medium=social&utm_campaign=object-array-dependencies-react-useEffect-hook

Subscribe to the BenMVP Newsletter | Ben Ilegbodu

Get notified about new web frontend development blog posts, upcoming minishops & other goodies by Ben Ilegbodu

https://www.benmvp.com/subscribe/?utm_source=twitter&utm_medium=social&utm_campaign=object-array-dependencies-react-useEffect-hook

You can follow @benmvp.

Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: