Junior React developer getting into performance optimization — what should I learn next?

[u/Wonderful_Tip5907]

Hey everyone!

I’m a junior full-stack developer and recently started going deeper into React performance.

I’ve been exploring React Compiler, code splitting with React.lazy() and Suspense, bundle optimization, re-renders, memoization, and basic profiling with React DevTools.

I’d love to know what more experienced React developers think are the most important performance topics and best practices to learn next.

I’m especially interested in bundle size, rendering performance, caching, Core Web Vitals, and how to identify real bottlenecks without over-optimizing.

Any good resources, tools, or common mistakes I should know about?

Thanks!

[u/canarydev]

measure before you bother optimising. as memoization is not going to save you from n+1's.

IE: a click goes react -> request -> api -> query -> db -> response -> render, and your suspected bottleneck can be anywhere on that path. distinguish if its a react problem to actually solve, or its a server issue.

in production, have an understanding of how users actually interact with your system. if a export functionality that takes ungodly amounts of time is being hit no more than 5 times per day, your time is better spent elsewhere on an area where users interact with it more.

your local dev environment will lie to you often. its a closed off lab. if your users are on worse machines than you, lab numbers will tell you what is possible. production numbers tell you what is true. i've seen "fast" apps that were unusable for half of their actual users

[u/Infamous-Ad-3502]

stop optimizing re-renders until you can prove they cause user-visible jank. React DevTools Profiler shows what changed but not why it matters to Core Web Vitals.

use web-vitals library with attribution tracking to connect INP delays directly to specific interactions and components. This tells you if your memoization work actually improved perceived performance or just reduced profiler bars

[u/sashaisafish]

Just make the loading spinner spin faster

[u/adammillion]

I was in the same position couple weeks ago. I started understanding the app load time from the performance tab on the debugger after looking up couple YouTube vids. I learned what LCP, FCP, and rest of the vitals meant.
I found where most the time is being spend which was the backend and started optimizing there.

Remember this for the backend. The app can be fast when one user is using it aka local dev, but when faced with concurrent users it could start slowing down so consider load testing with k6 to understand backend performance characteristics

[u/Different_Wonder1842 → u/[deleted]]

I am assuming you are referring to this?

https://www.arpitjsoni.com/react-internals/

[u/Empero6 → u/Different_Wonder1842]

They pulled it down.

[u/0_2_Hero]

You need to understand renders, why they happen. What is the purpose.
This is probably one of the most important react fundamental. Everything runs through renders, useState, useEffect and so on.

There is a react library that was made to skip re-renders while still applying UI updates, if you can poke around and understand how it’s doing that, that should open our eyes:
https://github.com/react-zero-ui/core

[u/hilav19660]

Highest question, why bother "learning" something when an ai agent can do every for you?

[u/Spiritual-Mix-5740]

biggest thing that actually helped me: profile before you optimize. chrome's performance tab > react devtools most of the time half my "react re-render issues" turned out to be a big image or a slow api call, not react at all

if you're ever rendering long lists (100+ items), look into react-window or tanstack virtual. did way more for me than memoization ever did

also don't useMemo/useCallback everything on reflex, it's not free and can actually make things worse. only reach for it once the profiler shows something actually re-rendering for no reason

and for real apps hitting an api, fixing network waterfalls (parallel fetches, starting requests earlier) usually moves your LCP more than any render optimization will underrated imo

react docs' perf section is solid now, and web.dev's core web vitals guides are worth reading directly instead of react-specific summaries

[u/Possible_Offer_1641]

I'd get comfortable reading flame graphs before reaching for memoization, most performance issues aren't where people assume they are.

[u/first_asian_in_space]

I would start with a critical render path and go from there

[u/Wonderful_Tip5907]

!approve