CODEWITHSUNDEEP
javascriptreactjsperformancetesting
Dostonbek Oripjonov
Dostonbek Oripjonov

Reputation: 1674

How to boost performance of react application when you have many components in React?

It is clear that improving performance of application is depends. However, I think there are some cases that you can imporove your application. In my case I have replaced my similar components to HOC. Any other suggestions ?

Upvotes: 3

Views: 822

Answers (3)

pritam
pritam

Reputation: 2558

If you are developing your web apps on Chrome, its Developer tools has a section called Audits.

The audits are run for many scenarios like image loading, no-JS support, no internet, time for 1st meaningful paint etc. It gives you a performance score at the end.

Run your React app, open Developer Tools and Go to 'Audits'. Choose the target platform (Mobile/Desktop) and run the Audit.

In the end, you will see a list of things that can be improved in your App. Very handy tool.

Upvotes: 1

Kishor Gowda
Kishor Gowda

Reputation: 118

One of the key point in performance would be the size of JS to be parsed and the number of DOM operations which are made by the same.

With exponential growth in the number of components, LOC will grow with it.

Primary solutions recommended to it would be to

  1. Load your components on demand with code-splitting and dynamic imports
  2. Batch your DOM operations / dispatch if using redux
  3. Use PureComponents
  4. HOC's

Upvotes: 1

Mike
Mike

Reputation: 424

Use React.PureComponent. It prevents from unnecessary re-render, but be careful, PureComponent has potential pitfalls.

Upvotes: 3

Related Questions