7 must-knows to improve performance of your react app in 2020
Introduction about the various features you need to know for optimizing your react application.
Performance optimization is one of the most interesting topics we discuss as software engineers. This applies to both backend and frontend if you are working on a web or mobile application. Performance helps a company to retain its customers. Even if the features provided are relatively less, customer engagement can be higher. For example, 100ms of latency cost Amazon 1% in their sales.
So yes, performance matters and you are incomplete as a react developer if you cannot find the bottlenecks or areas which can be optimised.
Have a look at two major segments of performance and check the tools or knowledge we must have to improve the overall experience of your web application.
- Load Performance (When the site loads)
- Runtime Performance (When the user operates)
How can we improve user experience in alignment with the above two categories? The following seven tips are the ones I’ve been using the most recently to improve the performance of our web application. Please feel free to share your tips on how to improve the react app performance in the comments.
1. Master react profiler
What is react-profiler?
React Profiler is a plugin developed by React that uses the Profiler API to collect information about each component that is being rendered. This information is based on the time and order and helps you to identify performance bottlenecks in your applications. You can check this plugin in your chrome dev tool by clicking the Profiler tab.
You can use this profiler to check both load and runtime performance.
Pro tip: Record why each component rendered while profiling. This acts as a replacement of one old but very useful plugin Why Did You Render.
2. Lighthouse & caching of requests
Lighthouse is an auditing tool provided by Google to test your website performance with certain metrics. This suggests which possible fixes you can add to your website. This is the screenshot of a profiled Flipkart India website. This profiling also suggests the things you need to do like removal of unused js, css files, improving SEO etc.
Alternatively, you can use WebPageTest to get similar detail.
Pro Tip: Try both, both are free anyway :D
3. Performance timeline (Browser profiling)
This too is a built-in chrome feature. You can see the timeline of how your application is being fetched and rendered using the Performance tab. This helps you to get an overview of how much time your app’s initial load takes in loading, scripting, painting and idle phases.
If scripting is taking a lot of time, have a look at what calculations you are doing in your js. In case of painting check for your heavy components like animations. The chart will look like this.
4. Dependency optimization
Use webpack bundle analyzer to check for heavy external dependencies in your project. Once you install this, it will show a breakdown of how much each of your dependencies are adding to the overall size of your app.
Major plugins that are very heavy but most commonly used are lodash, moment, and moment-tz. Also, be careful not to mess up your dev-dependency with dependency.
This is a view of bundle analyzer:
Webpack is smart enough to remove most of the unused code through tree shaking, but it's still a better way to import less code from your side if needed.
For example, just by simply changing the way you import dependencies, you could easily save up almost 90% in import size.
5. React.memo, useMemo and useCallBack
If you are not using these methods, better start to apply them now. The more you use it, the more clear it will be. Theoretically, it’s easy to understand.
React.memo is for component caching based on props.
React.useMemo is a hook to memoize complex js execution.
React.useCallback is a hook to memoize functions so that references don’t change to avoid unnecessary re-renders.
All of them are easy to use and we should use them carefully for heavy operations since we can have negative effects too if used in the wrong way.
Pro Tip: Use them together with React Profiler to see the effect they are having on your webpage.
6. Take full benefits of webpack
Initial load depends a lot on how your bundles are loaded. Instead of loading one big bundle of 1MB, it's better to load 10 bundles of 100KB in parallel. This can be done by using CodeSplitting in webpack. Additionally, we can use SplitChunksPlugin of webpack to extract common dependencies into an existing entry chunk or create a new chunk.
Load data on demand: Inside your react component, use router and React.lazy with Suspense for loading of components on demands when you navigate between page. By doing so, the browser will only have to load a few kilobytes of data on the initial load instead of 1 full bundle of some megabytes.
Running webpack in production also leads to other forms of optimization.
If your production site gets updated often, you can cache your non-changing dependencies (react, react-dom etc) into one lib-chunk so that this particular chunk doesn’t get loaded every time a new update is added with small change because most of the resources are requested via GET call which is browser cached.
7. eslint plugins
In case you are working in a team, or developing together with other teams, it's better to add some eslint plugins that significantly optimize your code and improve performance. These rules can be added at pre-commit so that some unoptimized code is not merged to your master branch. One of the plugins I found is eslint-plugin-react-perf
This adds the following rules in your source code.
- react-perf/jsx-no-new-object-as-prop: Prevent
{...}as JSX prop value - react-perf/jsx-no-new-array-as-prop: Prevent
[...]as JSX prop value - react-perf/jsx-no-new-function-as-prop: Prevent
functionas JSX prop value - react-perf/jsx-no-jsx-as-prop: Prevent JSX as JSX prop value
Similarly, we should add the rule of hooks and standards JS rules in our lint file. This will help prevent developers from writing anti-patterns. You can create your own custom rule if it is needed for your project only.
EndNote
There are a lot more things we can do to improve the performance. But I feel these are the most simple to learn and easy to achieve. If you are not using them yet, it’s time to check what they can do for you. Hope you learned something new by reading this.
In case I am missing anything, please feel free to comment. I will add them in my next blog.
Thanks for reading. Do share and clap.
