Today we will learn about Optimize React Application Performance in this tutorial.
- Immutable Data Structures - Data immutability is an inflexible way of writing code. It has many benefits such as Zero side effects, Easier to track changes, Simpler to create, test and use.
- Production Build - If you are experiencing performance problems in React assure that you are testing with the minified production build.
- Dependency Optimization - It means removing the methods/functions that you never used in your application. It will optimize the bundle size.
Memorize React Components - Use the
useMemo()hook to memorize/store the expensive functions result to use when the same input occurs again.
- Animations - There are many packages/libraries for Animations. So don’t use CSS Animations instead use those libraries or packages.
- Avoid using Index as key - Using the key as the index can show wrong data as it is being used to identify DOM elements.
- React.PureComponent - React.PureComponent optimizes components by reducing wasted renders.
- Virtualize Long List - It’s a way to improve performance when rendering a long list of data.
- Server-Side Rendering - Server-side rendered applications have a better user experience because users receive viewable content faster than client-side rendered applications.
- Lazy Loading - If you use numerous images in an application then you should use Lazy Loading to avoid rendering all of the images at once to improve the page load time.
- Multiple Chunk Files - If you split your large files into smaller files it will help the browser to catch less and reduce loading time.
- Reselect in Redux - It’s a simple selector library for Redux, it’s used for building memorized selectors.
- Using a CDN - CDN delivers static content more quickly and efficiently.
useCallback()- It’s same like
useMemo()memorize the results and
useCallback()memorize the function declarations.
There are many ways to optimize a react application. You have to know the core concepts about React after optimization. Optimization without measuring is almost premature, so you should measure performance first so that you can easily figure it out.
Thanks for reading this tutorial.