Cory House Profile picture
Consultant. Sharing coding tips. I help devs grow. Teaching software dev: https://t.co/D5emROQa4J Helping teams switch to React: https://t.co/Qfp4Tfp3jf ⚛️

Sep 14, 2021, 12 tweets

10 lessons I've learned about handling React state over the last 7 years...

(thread)

#react #reactjs

#1: Know the 8 ways to handle state, and when to consider each.

#2: Class components are dead to me.

#3: “Normalize” state by deriving on render.

#4: Understand when React renders, and how to avoid it.

#5: Most state is remote state. Streamline remote state via a custom "useApi" hook, react-query, or swr.

The result? WAY less code.

react-query/swr add:
✅Caching
✅Invalidates & refetches stale data
✅Dedupes requests
✅Auto retries
✅Refetch on refocus/reconnect

#6: Start local, then lift. Global is a last resort. Prop drilling is no biggie.

#7: Wrap each context in a single file.

✅Streamlines call sites
✅Provides useful error if context is consumed without the provider in a parent.

#8: You don’t need LoDash, Underscore, Ramda. Embrace immutable JS features.

#9: You don’t need a form library. You need a pattern.

#10: State Enums are 🔥. With simple state enums, you likely don’t need XState and state charts (though they are nice).

Was this useful? This is a little taste of all the React state tips I cover in "Managing React State" on @pluralsight.

Free trial: pluralsight.com/pricing/free-t…

Full course: app.pluralsight.com/library/course…

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling