React Performance: From Sluggish to Lightning

Depender Sethi Posted on May 30 • Originally published at sethi.io React Performance: From Sluggish to Lightning # react # devtips # javascript # webdev Most React performance advice is stuck in 2023. Here's what actually matters in 2026, explained through a highway traffic analogy Your React app is a highway. Components are cars. Renders are trips. The goal isn't fewer cars on the road. It's making traffic flow. Most React Performance Advice is Outdated If you've read a React performance article in the last three years, it probably told you to wrap things in useMemo and useCallback. Maybe it mentioned React.memo. Maybe it told you to "avoid unnecessary re-renders." That advice wasn't great in 2023. In 2026, with the React Compiler shipping auto-memoization, it's actively counterproductive. Here's what actually causes performance problems in modern React apps: Poor state placement causing entire subtrees to re-render Blocking the main thread during heavy updates instead of using concurrent features Loading everything upfront instead of splitting and deferring useEffect chains that trigger cascade re-renders None of these are fixed by adding useMemo. All of them have clean, modern solutions. Let's fix your highway. The Rubbernecking Problem Understanding Re-renders On a real highway, one car brakes suddenly. The car behind it brakes. The car behind that one brakes harder. Within seconds, traffic is stopped for a kilometer. Nobody knows why. The original car drove off five minutes ago. That's exactly how re-renders cascade in React. When a component's state changes, React re-renders that component AND every child component in its subtree. If that state lives at the top of your tree, every component below it re-renders. Even the ones that don't use that state. Even the ones that display completely static content. // The problem: state at the wrong level function App () { const [ searchQuery , setSearchQuery ] = useState ( "" ); return ( < div > < Header /