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:
1.Development
2.Deployment
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.
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
Top comments (0)