DEV Community

Cover image for Enhancing Performance in Your React Application
Subhro
Subhro

Posted on

Enhancing Performance in Your React Application

React is a premier library for crafting dynamic and interactive web apps. As your React project grows, ensuring it remains performant becomes critical. Here are some effective methods to boost the performance of your React applications.

Utilize React’s Built-in Optimizations

React.memo for Memoization
React.memo is a higher-order component that enhances functional components by preventing unnecessary re-renders. It does this by performing a shallow comparison of props.

Example:

import React from 'react';

const MyComponent = React.memo(({ prop1, prop2 }) => {
  return <div>{prop1} {prop2}</div>;
});
Enter fullscreen mode Exit fullscreen mode

Optimize with useMemo and useCallback

useMemo
Cache resource-intensive calculations to avoid recalculating on each render.

Example:

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const computedValue = useMemo(() => {
    return items.reduce((acc, item) => acc + item.value, 0);
  }, [items]);

  return <div>{computedValue}</div>;
};
Enter fullscreen mode Exit fullscreen mode

useCallback
Cache function references to avoid unnecessary re-creations.

Example:

import React, { useCallback } from 'react';

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <Button onClick={handleClick} />;
};
Enter fullscreen mode Exit fullscreen mode

Implement Code Splitting

Break your code into smaller chunks that load on demand to reduce initial load times.

Dynamic Imports

Example:

import React, { Suspense, lazy } from 'react';

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

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);
Enter fullscreen mode Exit fullscreen mode

Optimize Rendering

Avoid Inline Functions
Inline functions can trigger unwanted re-renders because new references are created with each render.

Example:

// Instead of this:
<button onClick={() => doSomething()}>Click me</button>

// Use this:
const handleClick = () => doSomething();
<button onClick={handleClick}>Click me</button>
Enter fullscreen mode Exit fullscreen mode

Use PureComponent and shouldComponentUpdate

For class components, employ PureComponent or shouldComponentUpdate to avoid unnecessary updates.

Example:

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

// Or with shouldComponentUpdate
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}
Enter fullscreen mode Exit fullscreen mode

Effective State Management

Lift State Up
Move state to the nearest common ancestor to reduce redundant prop drilling and re-renders.

Example:

const ParentComponent = () => {
  const [state, setState] = useState(0);

  return (
    <div>
      <ChildComponent state={state} setState={setState} />
      <AnotherChildComponent state={state} />
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Use Context API Wisely

While React's Context API is powerful, it can cause performance issues if misused. Avoid frequent context value updates and consider memoizing context values.

Example:

import React, { createContext, useContext, useState, useMemo } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [value, setValue] = useState(0);

  const memoizedValue = useMemo(() => ({ value, setValue }), [value]);

  return <MyContext.Provider value={memoizedValue}>{children}</MyContext.Provider>;
};

const MyComponent = () => {
  const { value, setValue } = useContext(MyContext);

  return <div onClick={() => setValue(value + 1)}>{value}</div>;
};
Enter fullscreen mode Exit fullscreen mode

Optimizing Lists and Tables

Virtualization
For large lists or tables, use libraries like react-window or react-virtualized to render only visible items.

Example:

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={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);
Enter fullscreen mode Exit fullscreen mode

Use Stable Keys

Ensure each list item has a unique and stable key to help React track items and reduce re-renders.

Example:

const items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

const MyList = () => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);
Enter fullscreen mode Exit fullscreen mode

Optimize Asset Loading

Lazy Load Images
Use libraries like react-lazyload to delay image loading until needed.

Example:

import React from 'react';
import LazyLoad from 'react-lazyload';

const MyComponent = () => (
  <div>
    <LazyLoad height={200}>
      <img src="large-image.jpg" alt="Large" />
    </LazyLoad>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Compress and Optimize Images

Minimize image sizes using tools like ImageOptim, TinyPNG, or using the WebP format for faster loading.

Example:

// Use WebP format for images
<img src="image.webp" alt="Optimized" />
Enter fullscreen mode Exit fullscreen mode

Use Production Builds

Run your application in production mode to enable optimizations and minification for better performance.

Example:

# In your build process
npm run build
Enter fullscreen mode Exit fullscreen mode

Conclusion

Boosting React application performance involves leveraging React’s built-in tools and adhering to best practices. By implementing these techniques, you can significantly enhance your app’s responsiveness and efficiency, providing a smooth user experience.

Top comments (1)

Collapse
 
matiasperrone1 profile image
Matias Perrone

I think in the "Use Stable Keys" avoid using id's or indexes as the only part of the key, instead the use of a prefix might be necessary.