How to write or understand performant code in React Web Application
Hey everyone, I am Sachin Rawal and I am a frontend technologist having a decade of experience in the industry.
I would like to share my experience while working on react application and way of working, how to improve the performance.
The first thing I would definitely want to emphasize that we should not try to improve the performance of application after the development, and what I meant is, we should always try to implement the performant code, either you write better code initially or fix it later but anyways you have to work on performance.
Nowadays every client looking for Fast rendering and fast rendering doesn't mean only FCP ( First Contentful Paint ) or TTI (Time to Interactive )
There are a lot of other aspects which we usually ignore for example CLS ( Cumulative Layout Shift ) which is a layout shift without user interaction and the reason for CLS is code that is written in the wrong manner ( I know most of the people will say it subjective and that’s our requirement but below the image can help you to understand what I meant is wrong code )
This is the image of a pigeon and he meant to be fly !!
Now pigeon is flying, but is that the right way?
That's what I meant for the wrong code.
Now I will give you a few pointer/suggestions or information which can help you to improve your performance before and after your development.
Third-Party Tool/plugin or modules
Before adding any plugin do think is it really required as a plugin , and if its required always compare plugin and their size.
For example : You want to implement Date formater and your only requirement is implement formated date( considering wholistic picture of project obviously )
you implemented react-datetime ( hypothetically as its most downloaded) and working fine now , but did you compare or explore other options ? like react-moment which is lighter then this ?
Function Implementation
Always call the function instead of writing it inline for example :
Avoid this:
<button onClick={() => setShow(true)}>Click Me</button>Use this :
<button onClick={this.handleClick}>Click Me</button>Reason : Functions are a type of object with special properties so react wont able to compare it.
Usage of Array properties like Map, Filter, etc
While using map , we should not pass index as a key, let’s try to understand with example.
On above gif i have added 3 product in my cart with map and they have index like as a key like 1–2 -3 and i remove the 2nd product now index would be 1–2 correct ?
but thats not right as we remove the 2nd product and it should not update the index of 3rd product because now 3rd product index is “2”
the case ideally it should be 1–3 as i removed 2nd product ( I hope my explanation is clear )
Re-rendering Issues
Unnecessary rendering is one of the pain in the eyes for any developer or client and to avoid this we should use.
shouldComponentUpdate, Pure Component, or React.Memo.
Disclaimer : You can not rid of re rendering all the time by above these, and i am sure you must have done bigger blunder in code if your components still re rendering :)
Avoid using spread operator in props
Avoid using unnecessary props which causing rerender for example :<Component {…props} />
Use this :
<Component propval={value} newpropval= {newpropval} />Reason : By sending props this way , we will send the unnecessary unused props which might cause rerender
Avoid Inline Styling
Object literal avoid in render or inline style on render which causing rerendering for example <Component style={{margin:0}} />
Server-Side Rendering ( NextJS )
With the help of SSR you can generate you page on server so that you web page will load fast , to understand Nextjs or SSR check this : https://nextjs.org/
Use Dynamic Import ( NextJS )
As we know with robust application content height are little large for example you can see page height of amazon listing pageThis is home page of amazon ( visible screen )
After the scroll, there are quite a few sections
we should not load these or add these modules in our visible page either is should lazy load or loaded as dynamic Import, it also does code splitting into different chunk and reduces the initial load
Detect unnecessary Rerendering
There is one more important plugin WHY-DID-YOU-UPDATE — library detects unnecessary component renders. Specifically, it points out instances where a component’s render method gets called even though no changes have occurred
That is not it :) there are 100's of other ways we can improve our web application but by these, we can give it a start and explore another way of improvement as well.
Thanks for reading this.
Maybe I missed which should be in the list or maybe you think differently as all five fingers are not equal right? I will really appreciate any feedback
