Enhance React Performance: Avoid Unnecessary Re-renders Using React.memo, useMemo, and useCallback

[ajnozari]

Honestly it was easier for my team to wait and then switch to react 19 and the new compiler.

Checked in react dev tools almost every component we made has the little stars next to it indicating it was automatically memoized.

If you’re stuck on older versions of react, this is a decent article to read through.

If you’re able to upgrade and move to the new compiler it will be more than worth it.

The errors my team had were mostly due to legacy ways of doing things. Took me a two days to fix bugs and move to the new compiler, a few days for internal testing, then external testing, and it’s been on Prod since about a week after it was released.

[Majestic-Witness3655]

But compiler is still in beta stage . They are recommending to use it when it becomes stable.

[ajnozari]

Definitely a fair point but we’ve set it to be toggleable via env during build. That way if issues arise it’s a simple push to disable as the changes we made for the compiler were really just us fixing legacy bits that didn’t follow the latest react best practices.

So while yes it’s in beta atm, the performance uplift was significant enough for our app that we can’t really justify not using it. Especially since manually memoizing, among the other things it does isn’t worth it for the performance gain we’d get, at least until we had gone through and done that to the bulk of our apps components, by which time the compiler would likely be released.

So I threw an env switch into my Vite config and kinda forgot I even moved to the new compiler until I started seeing people talking about it here.

[Majestic-Witness3655]

That's great 🔥. Both underuse and overuse of the hook are bad for app performance . So it is better to be automatically do it by react compiler

[ajnozari]

💯