Fix Load time in you React.js app.

Does your app take >2 secs to load? Are you sure you have done all that you can do to deliver smooth and fast experience to your client? Keep reading you will get to know more and possibly found something new that can impact your React.js app performance.

Network Performance:

a. Bundle size: The first thing your browser do is to load the bundle of your app. Bundle is deliver to browser over network. So if bundle size is high it will take more time to load. But there are some ways in which you can optimize the bundle size.

• Lazy loading:- Not everyone will visit every page of your website each time they login. So why load full bundle? You can breakdown the main bundle to multiple chunk bundle such that main bundle contain only core files. You can load chunk bundles containing less critical components when they are required. This will optimize the bundle size hence it will be loaded faster.
• Compression:- Brotli is latest compression technique that is not supported in all browser but its output is < compressed file by gzip. We can check if browser support Brotli if yes then use brotli else gzip.
• Tree shaking:- In simple words remove dead code from you code. Remove code that you will never use. Bundlers like webpack support this feature.

b. Http2:- In http1 multiple request are loaded sequentially if you are fetching multiple resources each will have separate connection and new connection is required that each request has request and response. In http2 it can fetch multiple resources over single connection parallelly.

c. CDN:- Utilize a Content Delivery Network (CDN) to distribute static assets closer to users and reduce latency.

d. Cache:- Implement caching strategies (e.g., HTTP caching, Service Workers) to store and reuse previously fetched resources.

e. Optimize Images & Assets:- Compress and optimize images and assets to reduce file sizes without compromising quality. Use modern image formats (e.g., WebP) and consider using responsive images or lazy loading techniques.

Rendering

• React Profiler:- It’s cool plugin that give insightful data regarding which component is rendering and how long its taking to render what component. You can use that to detect unwanted re-renders to boost performance.
• Keys:- Don’t forget to give keys to list item’s that are dynamically render based on array/object value. Key help React.js to detect which component need re-render, add or remove.

Animations

Animations that are done using CSS are much more performant as compare to animations via JS. Here are few reasons regarding that.

1. Main Thread block:- JS animations block main thread that means high priority tasks will have to wait.
2. Layout update:- Animations that manipulate DOM will trigger recalculation and update of layout which can impact performance.
3. GPU:- CSS animations are GPU accelerated.

React.Fragment

React has inbuilt HOC called Fragment which they recommend to use when ever multiple items lists are rendered. This is optimized as

1. DOM:- React.Fragment dont create extra node in DOM. It try to avoid that. Which result in less number of DOM nodes and improve performance.
2. Styling:- React.Fragment will avoid possible issues in styling that we can face by extra parent node.

I will keep adding more whenever I learn new thing that help optimizing react app.