DEV Community

Cover image for Top Performance Tips for React App 2019

Posted on

Top Performance Tips for React App 2019

Picture this : You have to increase the performance of your React App. To achieve a better performance what measures you should take care while developing and deploying the app?
React does a great job in terms of performance, but, if you have a complex application, you may start to see issues with it. You can still do something to improve its performance which are categorized as below:



Tips for Development Process

1.Avoiding & Measuring Render Time

First of all we must avoid re-rendering of our components without any requirement. Also we need to calculate the rendering time so that we can decrease it. A simple way is to use Use-Timing-API. Additionally you can check for react rendering in browser with below options.
Alt Text

2. Use Pure Components

To avoid the Reconciliation process of React, We must use Pure-Components as , there is already a default implementation of, shouldComponentUpdate() with a shallow prop and state comparison. So, a pure component is a component that only re-renders if props/state is different from the previous props and state.

3. Dynamically Load Long List

If you have a long list of items which you want to render it on your page, then breakdown it in smaller list and render it on scrolling or any other event listener. You can do it with react-window & react-virtualize.

4. React Concurrent Mode

If Performance is the utmost priority in your react app, then you must go for react concurrent mode. One of the simplest way to achieve concurrency is with React suspense and Lazy loading of components.

For full post you can read it on : Medium Post

Discussion (0)