My React app has been getting slower over the past few months and I don't understand why. I've started looking at it with Chrome DevTools, but I can't really make sense of the performance metrics. Is there a simple way to find bottlenecks?
Try running your app with `npm run build` and check out the bundle size - that'll show you right away if some package is bloated. It often happens that you accidentally import entire libraries when you only need a tiny function. Here's a practical tip: use Lighthouse audits in Chrome DevTools, not just the performance metrics - it shows you much more directly where things are actually slow and gives you concrete improvement suggestions instead of just cryptic numbers.
The most common issue is unnecessary re-rendering - check which components are constantly re-rendering even though their props haven't actually changed. You can use the React Profiler tab in Chrome DevTools to see exactly which components take the longest and how often they render. Often `React.memo()` for individual components or `useMemo()` for expensive calculations can already help optimize that. If that's not enough, it could also be that your state is organized too centrally and every small change re-renders the entire app - in that case the Context API or a state management tool like Redux would help.
If your app has gotten slower over months, it's worth looking at your dependencies - some packages get bigger over time or bring along more code that you don't even need. With `npm ls` or `yarn why` you can check which libraries are installed twice or why certain packages are there at all. By the way: in Chrome DevTools under Performance you can start a recording, then you'll see exactly where the app is wasting time - look at the main thread activity, not just the individual metrics.
Before you get too deep in the Chrome DevTools weeds: most of the time it's not actually browser performance that's the problem, but your app loading too much code or making too many API requests. That's an annoying surprise when you're just staring at the flame charts.
I'd start with two practical checks: First, open the Network tab and see how big your bundles are and how long the API calls take. If you've got some massive JavaScript files lying around or the server is taking forever to respond, then no amount of React tuning will help you. Second, use `npm outdated` or check your package.json - sometimes you accidentally pull in huge packages through dependencies that you're not even actively using. You can also use `npm ls` to see which packages are installed multiple times.
If all that looks normal, then React DevTools (the separate browser plugin, not Chrome DevTools) can help you: you'll see live which components are rendering and how often. That's way more telling than any performance metrics. Look for components that keep re-rendering even though their inputs haven't changed - that's genuinely a common culprit.
Log into answer.
