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...

1️⃣ Depend on the obj properties instead of the entire obj

/thread 🧵👇🏾 ImageImage
2️⃣ 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

🧵👇🏾 Image
3️⃣ 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)

🧵👇🏾 Image
4️⃣ 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)

🧵👇🏾 Image
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? 🤔

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…

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Ben Ilegbodu 🏀👨🏾‍💻

Ben Ilegbodu 🏀👨🏾‍💻 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @benmvp

14 Jan
If you're getting started with React in TypeScript one of the first things you'll wanna do is migrate from runtime prop-types over to static TS types

Typing a function component is the same as any function in TS

Typically props are typed with a TS `interface`

/thread 🧵👇🏾 ImageImage
The primitive prop types map over to their TS equivalents...

🧵👇🏾 ImageImage
Special types like React nodes, enums, class instances, and others...

🧵👇🏾 ImageImage
Read 7 tweets
15 Dec 20
I used to tell folks learning React to learn JS really well first. I had good intentions but was still gate-keeping 😔

But I do think knowing modern JS can really level-up your React skills and I've got top 10 features I think will help you be more awesome-r 🔥🔥

[🧵 thread]
1. ES Modules

I see lots of confusion about when to use named vs default imports. The import style depends on how it was exported (named or default)

Named imports go within the curly braces & the single default import is outside of them 🤓 ImageImage
2. Arrow functions

Arrow functions can exist everywhere within your React app. Some folks (like myself) replace all functions with arrows while others only use them in spots

They really win w/ character savings but for those unfamiliar w/ the syntax they can lose w/ clarity 🧐 ImageImage
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!