How to increase performance in React?

Expert Posts
,
1

Use React.memo and PureComponent:

Memoization helps in optimizing functional components by preventing unnecessary re-renders. React.memo is a higher-order component, and PureComponent is a base class; both work to memoize components' rendering. For example:

import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
    / render using props /
});

Implement Virtualization for Large Lists: Rendering large lists can significantly impact performance. Implementing virtualization techniques like windowing (rendering only the visible items) can improve performance. Libraries like React Virtualized and React Window can help with this. Example with React Window:

import React from 'react';
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
  <div style={style}>
    Row {index}
  </div>
);
const MyList = () => (
  <List
    height={400}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);
export default MyList;

Good Practices to Keep in Mind:

  • Optimize Render Performance: Reduce unnecessary renders by using React's shouldComponentUpdate lifecycle method or PureComponent for class components, and React.memo for functional components.
  • Code Splitting and Lazy Loading: Split your React application into smaller chunks and load them lazily. This helps in reducing the initial load time, as only required components are loaded initially. Use React.lazy and Suspense for lazy loading:
import React, { Suspense } from 'react';
// Lazy load the component
const MyLazyComponent = React.lazy(() => import('./MyLazyComponent'));
const MyComponent = () => (
  <Suspense fallback={<div>Loading…</div>}>
    <MyLazyComponent />
  </Suspense>
);
export default MyComponent;

Pitfalls to Avoid:

  • Excessive Use of setState: Frequent use of setState can lead to performance issues, as it triggers re-renders. Instead, consider using functional updates or batching multiple setState calls into one.
  • Not Optimizing Heavy Operations: Avoid heavy computations or operations within render methods. These can slow down rendering and degrade performance. Move such operations outside of render or memoize the results.