What scares a Front-end developer???👇😱
That performance score looks really bad for your users. So, how to overcome this? Well, just keep reading 📖
Following are the practical approaches for improving the performance of a react application by following best practices and sure-shot tips. 🎯
1. Use properly sized images
Most front-end beginners often make the mistake of using large resolution images where it's absolutely not recommended. Such as using a high-quality picture for Avatar in the dashboard navigation section.
They need not be of great resolution, 100x100 sized images can work perfectly for such use cases.
There can be two approaches to display an image from CDN:
Fetches high-quality picture from CDN and resizes it using width and height constraints, this is just mere waste of the network data and time, won't recommend this personally.
Instead, fetch a low-resolution picture and directly render it with any required styling. This will not only save the user's network data but also speeds up the page rendering. Also using this practice does no compromise to user's experience instead it is a plus for UX.
2. React Lazy loading
This is a great method to drastically improve yours react app's performance. Usually, our code is bundled together in a big javascript chunk file. We can split this file into different chunks to reduce the size and improve the loading speed of our web app by "lazy loading".
How we do it?
❌
import todoList from "./todo"
import navBar from "./nav"
import settings from "./dashboard/settings"
this approach just bundles everything in one chunk, which we don't want.
On our initial page load, we might not need each and every component, instead, we can just load what's needed and load other components when they are required.
Do it like this ✔
const settings = React.lazy(() => import('./dashboard/settings'));
This will load the bundle containing the Dashboard settings when this component is first rendered, and thus doing this with many components as needed will save us a lot of network bytes and time. 💯
3. Memoization
What is it?
This simply means, "remember the result for a set of inputs, and if those inputs are given again, just re-use the remembered result for it instead of re-calculating the result for the same input".
Now how to say that in react? 💡
Suppose there is a small change on the currently rendered page, which re-renders everything including the components with unchanged props. This re-render is absolutely unnecessary and can be avoided using React Memo
In-practice:
const ProductCard = React.memo(function ProductCard(props) {
});
4. Avoid unnecessary re-renders
If your project uses redux, this might be a helpful tip. As redux practices immutability, it creates a new object every time there is an action dispatched and that changes references for that object. But sometimes this might be a trade-off for performance as every time the references change, the page is re-rendered even for the smallest update in the state.
To tackle this issue, we have Reselect, a library that encapsulates our redux state and checks for any kind of state update, and informs React that whether to re-render or not.
This saves our precious time as Reselect compares previous and current state to check the updated state fields, and updates the UI only if there is an actual update.
5. Web worker for intensive tasks
This last tip really counts to be the most effective one! If there is an intensive task that would take long enough time to complete then don't do it on the main thread, instead, do it parallelly by creating a new thread, this will allow UI to render obstacle-freely and reduces the load on main thread.
How we achieve this? By using Web worker 💪
const worker = new Worker('demo_worker.js')
The web worker can't directly access the DOM, we just exchange input and output with the worker and then update our UI accordingly from the parent component itself, not from the worker file.
Will share more detailed info about Web workers in some other post. 😉
Also
if you have more tips around this topic, make sure to drop them in the comment section and share them with someone who needs to optimize their react app as well 🙌😊
See you in the next blog post, stay safe ✌
