Introduction
Building a React app is easy. But optimization is the most difficult part. In this article, I will be discussing some of the most popular techniques to master web performance in React.
Code Splitting
Code Splitting is one of the most popular techniques for optimizing web performance. In Code Splitting, we split our application into smaller chunks and load them when needed. <Suspense/>
and lazy()
will help us with this.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const Parent = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
Image Optimization
Images can become an enemy of web performance. So, we need to use images in the React project cautiously. We can use techniques like Lazy Loading Images, Image Compression, and Right Image Formatting to optimize images in the project. To learn more about Image Optimization in React, check out my blog "Boosting Performance: Image Optimization in React".
const App = () => {
return (
<div>
<img src="image.jpg" loading="lazy" height="300px" width="300px" />
</div>
);
}
Memoization
Memoization is one of the amazing features of React. State and function re-rendering is an expensive computational task. To reduce unnecessary re-renders we can use the useMemo
and React.memo
functions.
const MyComponent = React.memo(TestComponent);
Debouncing and Throttling
Specially for scroll and resize events we do a lot of re-rendering in React. Implement debouncing and throttling for event handlers to prevent excessive rendering.
Caching
Caching is one of the most underrated ways to improve performance. Implement client-side caching for data that doesn't change frequently to reduce the need for unnecessary API calls.
Summary
In this article, I have discussed some of the most popular techniques for improving React Performance. If you want to learn more about Frontend Development and Software Engineering check out my profile on Dev.
Top comments (3)
Bundler like parcel, already come with the functionality of Caching, so what else we can do to improve Caching?
Btw You are awesome sir I met you at GDSC
Wow of Kolkata 😊
I think performance improvement is a gradual process, for Caching parcel is a great tool and mostly sufficient I think.
Okay, glad to know that you liked my session there 😃. Thank you.
Thank you so much sir for your valuable response ☺️