Optimizing ReactJS applications

In this article, we are going to see the methods to optimize our React application.

To create a real-world React application, optimized code is greatly required to enhance the performance. There are several ways to optimize a React application but some of the most preferred ways are mentioned below −


It is the technique used to speed up the application by storing the result as the cache and only calling the function again when the inputs are changed otherwise the cached result is returned.

Use React.memo() for functional components. This method is used to only re-render the component if the props passed to component changes


export default React.memp(App)

Use shouldComponentUpdate method for class based components.


Class Person extends React.Component{
         return true;
      return false;

Using React.PureComponent

This method is majorly used to optimize the performance which only re-render the component if the state or props passed to the component changes.


Class Person extends React.PureComponent{}

Caching Function

By using useCallbacks, we can highly optimize our React application, so that it returns only the updated result if the inputs are changed otherwise return the cached data.


Const value = useCallback((a,b)=>return a+b,[a,b])

Lazy Loading

By lazily loading the not-so-necessary components of our ReactJS applications, we can highly optimize the React application as it will reduce the DOM loading time and also reduces the bundle size.


Const Person = React.lazy(()=>import(‘./Person.js’))

Using Immutable Data Structures

By changing the state immutably, we can ensure to prevent temporal coupling and can also easily track the changes in the state.

      name: 'Rahul Bansal',
      id: '01'

Changing state immutably

   user: ...this.state.user,
      name: 'TutorialsPoint'

To ensure immutability, we can also third-party dependencies like Immutable.js.

Using React.Fragments

Instead of using an extra <div> tag, we can use the <React.Fragment> to group the children tags without the need of an extra node.


return (