Top 10 Performance Optimization Techniques for React Applications

React is one of the most popular JavaScript libraries for building user interfaces. While it offers great flexibility and speed, poorly optimized React applications can suffer from performance issues, leading to slow rendering and poor user experience. To help you build high-performing React apps, here are 10 performance optimization techniques, complete with code examples.

1. Use React.memo for Component Memoization

React.memo prevents unnecessary re-renders by memoizing functional components.

Example:

const Button = React.memo(({ onClick, label }) => {
  console.log("Button rendered!");
  return <button onClick={onClick}>{label}</button>;
});        

When the parent re-renders, the Button component will only re-render if its props change.

2. Optimize State Management

Keep the state as local as possible to avoid unnecessary renders of unrelated components.

Example:

function ParentComponent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildComponent />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

const ChildComponent = React.memo(() => {
  console.log("Child rendered!");
  return <div>I'm a child component</div>;
});        

Here, the ChildComponent won’t re-render when the state in ParentComponent changes.

3. Implement Lazy Loading with React.lazy

Load components only when needed to reduce the initial load time.

Example:

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}        

4. Use Code Splitting

Break down your app into smaller bundles using tools like webpack or React.lazy.

Example:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </React.Suspense>
    </Router>
  );
}        

5. Optimize Images

Compress and serve responsive images using libraries like sharp or services like AWS CloudFront. Use next/image in Next.js.

Example with next/image:

import Image from 'next/image';

function HomePage() {
  return <Image src="/hero.jpg" alt="Hero Image" width={800} height={600} />;
}        

6. Avoid Inline Functions

Inline functions cause new references to be created on every render.

Bad:

<button onClick={() => handleClick(id)}>Click Me</button>        

Good:

const handleClick = useCallback((id) => {
  console.log(id);
}, []);

<button onClick={() => handleClick(id)}>Click Me</button>;        

7. Use React Profiler

React Profiler helps identify performance bottlenecks in your components.

Add Profiler to Your Component Tree:

import { Profiler } from "react";

function App() {
  return (
    <Profiler id="App" onRender={(id, phase, actualDuration) => {
      console.log({ id, phase, actualDuration });
    }}>
      <YourComponent />
    </Profiler>
  );
}        

8. Optimize Rendering with Key Props

Always use unique key props for lists to prevent unnecessary DOM updates.

Example:

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>        

9. Use Throttling and Debouncing

For handling frequent events like scrolling or typing, use lodash to throttle or debounce functions.

Example:

import { debounce } from "lodash";

const handleInput = debounce((e) => {
  console.log(e.target.value);
}, 300);

<input type="text" onChange={handleInput} />;        

10. Upgrade to React 18 and Leverage Concurrent Features

React 18 introduced concurrent rendering, improving the app's responsiveness during heavy computations.

Example with startTransition:

import { useState, startTransition } from "react";

function App() {
  const [searchTerm, setSearchTerm] = useState("");

  const handleChange = (e) => {
    startTransition(() => {
      setSearchTerm(e.target.value);
    });
  };

  return <input onChange={handleChange} />;
}        

Conclusion

React provides many tools to build high-performance applications, but optimizing performance requires a mix of best practices and techniques. By applying these 10 strategies, you can ensure that your React application delivers a fast, smooth, and enjoyable user experience.

Thank you so much for reading, if you want to see more articles you can click here, feel free to reach out, I would love to exchange experiences and knowledge.