Boost React App Performance: 4 Proven Optimization Techniques

Purpose

Many projects use React; mastering performance optimization improves user experience and maintainability.

Optimization Strategies

The article presents four main ideas: reduce the number of renders, reduce rendered nodes, lower rendering computation, and design components rationally.

Reduce Render Count

Use PureComponent to implement a shallow prop and state comparison, but ensure props/state are primitive values or immutable to avoid unnecessary renders.

Implement shouldComponentUpdate to decide when a component should re‑render based on changed props or state:

import React from "react";
export default class ShouldComponentUpdateUsage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "小明",
      age: 12,
      address: "xxxxxx",
      height: 165,
      weight: 40
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ height: 168, weight: 45 });
    }, 5000);
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextState.name !== this.state.name ||
      nextState.age !== this.state.age ||
      nextState.address !== this.state.address
    ) {
      return true;
    }
    return false;
  }
  render() {
    const { name, age, address } = this.state;
    return (
      <div>
        <p>Student name: {name}</p>
        <p>Student age: {age}</p>
        <p>Student address: {address}</p>
      </div>
    );
  }
}

When appropriate, React.memo can wrap functional components to skip re‑rendering if props have not changed. A custom comparison function can be supplied as the second argument.

function MyComponent(props) { /* render using props */ }
function areEqual(prevProps, nextProps) {
  // return true if props are equal, false otherwise
}
export default React.memo(MyComponent, areEqual);

Reduce Rendered Nodes

Leverage component lazy loading with React.lazy and React.Suspense to load components only when needed, decreasing bundle size and initial render time.

import React, { Suspense } from "react";
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Virtualized lists (e.g., react-virtualized, react-window) render only visible items, improving performance for long scrollable data.

Lower Computation

Use useMemo to cache expensive calculations based on dependency arrays.

function computeExpensiveValue(a, b) { /* heavy logic */ }
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Always provide a dependency array; otherwise the value recomputes on every render.

When rendering lists, provide a stable key for each item to help React identify changes efficiently.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map(number => (
  <li key={number.toString()}>{number}</li>
));

Rational Component Design

Simplify props and state to contain only data needed for rendering, adhering to the single‑responsibility principle.

Avoid deep nesting caused by excessive higher‑order components or render props; prefer hooks or plain props when possible.

Replace anonymous functions inside render with memoized callbacks using useCallback to prevent unnecessary re‑renders.

const MenuContainer = ({ list }) => {
  const handleClick = useCallback(id => () => {
    // ...
  }, []);
  return (
    <Menu>
      {list.map(i => (
        <MenuItem key={i.id} id={i.id} onClick={handleClick(i.id)} value={i.value} />
      ))}
    </Menu>
  );
};

By following these practices—reducing renders, trimming node count, minimizing computation, and designing components thoughtfully—developers can significantly improve React application performance.

Reference: https://react.docschina.org/docs/optimizing-performance.html