Finding and fixing the actual reason a React app re-renders too much.
By default, when a component re-renders, every one of its children re-renders too, regardless of whether that child's own props actually changed. That's a non-issue for small trees, and a real cost as apps grow. React.memo, useMemo, and useCallback all exist to interrupt that default cascade — but only when there's an actual reference-equality problem being solved; wrapping every component and function in them without profiling first is a common mistake that adds overhead without any measurable benefit.
The React DevTools Profiler is the right starting point for any real optimization work — it shows exactly which components re-rendered on a given interaction and why, turning a vague 'the app feels slow' into a specific, fixable component. Beyond controlling re-renders, list virtualization (only rendering the rows actually visible in a long list), route-level code-splitting, and moving genuinely expensive computation off the render path entirely tend to matter far more at scale than micro-optimizing components that were never the actual bottleneck.
What you'll walk away knowing