React Performance Optimization: Techniques That Actually Reduce Render Time
React performance optimisation is not about adding React.memo everywhere. It is about measuring, finding the actual bottlenecks, and applying the right technique to each one.
React applications slow down for predictable reasons: they render too often, they ship too much JavaScript, and they do work on the main thread that should be deferred. The techniques to fix these are well-known. The discipline is applying them only where they are needed, which requires measurement.
Measure before you optimise
The React Profiler in React DevTools shows which components render and how long each takes. The Chrome DevTools Performance tab shows the full rendering pipeline — script execution, layout, paint. Lighthouse gives you Core Web Vitals. Without these tools, you are guessing at bottlenecks, and guessing at performance optimisation wastes more time than it saves.
1. Reduce unnecessary re-renders
When a parent component renders, every child renders unless memoised. For a deeply nested tree, a single state change at the top can cause hundreds of component re-renders. Three tools address this:
- React.memo — wraps a component so it only re-renders when its props change. Use on components that are expensive to render or receive stable props.
- useMemo — memoises a computed value so it is not recalculated on every render. Use for expensive calculations or when the result is passed as a prop to a memoised child.
- useCallback — memoises a function so it maintains the same reference across renders. Use when passing callbacks to memoised children.
The principle: do not memoise by default. Measure, find the component that renders when it should not, and apply memoisation there. Memoising everything adds comparison overhead that can make performance worse.
2. Code splitting and lazy loading
A single-page application ships one JavaScript bundle. As the application grows, the bundle grows, and the initial load time grows with it. Code splitting breaks the bundle into chunks loaded on demand.
React.lazy and Suspense let you load route components only when the user navigates to them. A 2MB application becomes a 200KB initial load plus chunks loaded as needed. This is the single most impactful performance technique for large React applications, and it requires almost no code changes — just wrapping imports in React.lazy.
3. Virtualisation for long lists
Rendering 10,000 list items takes time — not because React is slow, but because the browser is rendering 10,000 DOM nodes. Virtualisation renders only the items visible on screen plus a small buffer, and replaces them as the user scrolls. Libraries like react-window or react-virtualised handle the measurement and positioning. The difference is not incremental: a list that takes seconds to render can become instantaneous.
4. Debounce and throttle expensive operations
Search inputs, scroll handlers, and resize listeners fire on every event — potentially hundreds of times per second. Debouncing delays execution until the user stops typing; throttling limits execution to once per interval. Both prevent the main thread from being overwhelmed by events that do not need immediate handling.
5. Move work off the main thread
Heavy computation blocks rendering. Web Workers let you run JavaScript on a background thread, keeping the main thread free for UI. This matters for data processing, image manipulation, and any operation that takes more than a few milliseconds — the threshold above which users perceive lag.
Performance that users feel and metrics prove
React performance optimisation is not about adding techniques — it is about measuring, finding the bottleneck, and applying the right fix. We profile, diagnose, and optimise React applications to meet Core Web Vitals targets.
Kinematic Digital designs mobile security programmes for enterprise organisations. See our cybersecurity services and web development practice, or book a mobile security assessment.
Frequently Asked Questions
What is React performance optimization?
Techniques and practices that reduce render time, bundle size, and memory usage in React applications — including memoization, code splitting, lazy loading, virtualisation, and reducing unnecessary re-renders.
false
undefined
true
undefined
What is code splitting and why does it matter?
Breaking your JavaScript bundle into smaller chunks that are loaded on demand. This reduces the initial page load time because the browser only downloads the code needed for the current route, not the entire application. React.lazy and Suspense are the built-in tools.
false
undefined