React performance technique: Split a big component if some state is only used in a portion of the JSX.

Splitting reduces the amount of JSX rendered when state changes.

Principle: Keep state as local as possible. Then less JSX is rendered when state changes.

Also, I feel like I should share this caveat any time I share a React performance tip: You probably don't need it.

I've been working in React for nearly a decade. I hardly ever need to use any performance optimizations.

React is typically plenty fast by default.

View original on X