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


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: https://www.pluralsight.com/pricing/free-trial

Full course: https://app.pluralsight.com/library/courses/react-state-managing/table-of-contents

View original on X