React is one of the most popular frontend frameworks used for developing user interfaces. Performance optimization is essential for building a successful React application. If performance issues are not addressed, it can lead to poor user experience, slow loading times, and ultimately, a failed application. Here are 10 performance optimization techniques that can be applied to React applications to improve their performance.

Memo

Use React.memo: React.memo is a higher order component that memoizes a functional component and skips re-rendering if its props remain the same. This is a great way to improve performance when a component is not changing its props.

const MyComponent = ({ user }) => {
  return <div>{user.name}</div>;
};

export default React.memo(MyComponent);

Use the useMemo Hook: useMemo is a hook that memoizes a value so it is not recalculated every render. This can be useful for optimizing expensive calculations that are used in components.

const MyComponent = ({ user }) => {
  const name = useMemo(() => {
    // Do an expensive calculation
    return user.name;
  }, [user]);

  return <div>{name}</div>;
};

Use React.PureComponent: PureComponent is similar to React.memo in that it skips re-rendering if its props remain the same. However, it works for class components, which can be more performant than functional components.

class MyComponent extends React.PureComponent {
  render() {
    const { user } = this.props;
    return <div>{user.name}</div>;
  }
}

Lazy loading

Use React.lazy and Suspense: React.lazy allows you to dynamically import components, which is a great way to improve performance by splitting up your code into smaller chunks. This can be combined with the Suspense component to show a fallback UI while the code is being imported.

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

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
);

shouldComponentUpdate / useEffect

Use shouldComponentUpdate: shouldComponentUpdate() is a lifecycle method that allows you to determine if a component should re-render or not. This can be useful for optimizing components that render expensive operations.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { user } = this.props;
    return user.name !== nextProps.user.name;
  }
  render() {
    const { user } = this.props;
    return <div>{user.name}</div>;
  }
}

Use the useEffect Hook: useEffect is a hook that allows you to determine if a component should re-render or not. This can be useful for optimizing components that render expensive operations.

const MyComponent = ({ user }) => {
  const [name, setName] = useState(user.name);
  const shouldUpdate = useRef(true);

  useEffect(() => {
    if (user.name !== name) {
      shouldUpdate.current = true;
      setName(user.name);
    } else {
      shouldUpdate.current = false;
    }
  }, [user.name]);

  useEffect(() => {
    if (shouldUpdate.current) {
      // Do something expensive
    }
  }, [name]);

  return <div>{name}</div>;
};

React Fragment

Use the React.Fragment Component: Fragments can be used to wrap multiple elements without adding extra nodes to the DOM. This can be useful for optimizing components with many elements.

const MyComponent = () => (
  <React.Fragment>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
  </React.Fragment>
);

callback hook

Use the useCallback Hook: useCallback is a hook that memoizes a function so it is not recreated every render. This can be useful for optimizing functions that are passed as props to child components.

const MyComponent = ({ user }) => {
  const handleClick = useCallback(() => {
    // Do something
  }, [user]);

  return <button onClick={handleClick}>Click me</button>;
};

Ref

Use the useRef Hook: useRef is a hook that allows you to create a mutable object that will persist between renders. This can be useful for optimizing components that need to store state that does not trigger a re-render.

const MyComponent = () => {
  const ref = useRef({ counter: 0 });

  ref.current.counter += 1;

  return <div>Counter: {ref.current.counter}</div>;
};

Context

Use the useContext Hook: useContext is a hook that allows you to access context from a component. This can be useful for optimizing components that need to access the same data from multiple components.

const MyContext = React.createContext();

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};