5 React Performance Optimization Tips

React is fast by default, but as your application grows, you may notice sluggish interactions, slow renders, or poor Core Web Vitals. Here are five proven tips to keep your React app blazing fast.

1. Use React.memo and useMemo Wisely

Unnecessary re‑renders are the number one performance killer. Wrap functional components with React.memo to prevent re‑renders when props haven’t changed:

const ExpensiveComponent = React.memo(({ data }) => {
  // heavy computation or large list
});

For expensive calculations inside a component, use useMemo:

const sortedList = useMemo(() => data.sort(sortFn), [data, sortFn]);

Remember: memoization has a cost. Only apply it after profiling with React DevTools.

2. Code Splitting with React.lazy and Suspense

Don’t send your entire app bundle to the user at once. Split your code at the route level:

const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

This reduces the initial JavaScript payload and improves Time to Interactive (TTI). In 2026, Vite and Next.js handle code splitting automatically, but it’s good to know the fundamentals.

3. Virtualise Long Lists

Rendering 1,000 items in a DOM kills performance. Use a library like react-window or react-virtuoso to render only the visible rows:

import { FixedSizeList } from 'react-window';

const List = ({ items }) => (
  <FixedSizeList
    height={400}
    width="100%"
    itemCount={items.length}
    itemSize={50}
  >
    {({ index, style }) => (
      <div style={style}>{items[index]}</div>
    )}
  </FixedSizeList>
);

Get Sajid Ahmed’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. Optimise Images and Assets

Unoptimised images are the most common cause of poor LCP scores. Use:

• The <picture> element with WebP/AVIF formats
• Lazy loading: <img loading="lazy" />
• Responsive images with srcSet
• Next.js Image component (if you’re using Next.js)

Also, move static assets to a CDN and enable compression (Brotli/Gzip) on your server.

5. Avoid Anonymous Functions in JSX Props

Anonymous functions and objects create new references on every render, causing child components to re‑render unnecessarily:

// ❌ Bad
<Child onClick={() => handleClick(id)} />

// ✅ Good
const memoizedCallback = useCallback(() => handleClick(id), [id]);
<Child onClick={memoizedCallback} />

Combine this with React.memo on the child for maximum impact.

Bonus: Use the Profiler

React DevTools now includes an excellent Profiler. Record a session while interacting with your app to identify render bottlenecks. Always measure before and after applying optimisations — your gut feeling is often wrong!

Wrapping Up

Performance optimisation is an ongoing process, not a one‑time fix. Start with profiling, then apply these tips where they matter most. If you need help making your React app faster, I’m available for consultations.