Efficient React Web Apps: 5 Optimization Tricks
<p>Are you looking to take your React web application to the next level in terms of performance and efficiency? Look no further!</p> <p>In this article, we will explore a short list of React optimization techniques that can help transform your web application into a high-performing powerhouse.</p> <p><em>Did you know that the average user’s patience for a web page to load before they leave out of frustration is about 3 seconds (according to a </em><a href="https://www.marketingdive.com/news/google-53-of-mobile-users-abandon-sites-that-take-over-3-seconds-to-load/426070/"><em>study that Google performed</em></a><em>)</em></p> <p><strong>So here are some ways to handle it:</strong></p> <ol> <li> <strong>Code Splitting</strong>— Code splitting allows you to divide your React application into smaller chunks, loading only the necessary code for each specific page or feature. Repetitive logic in the code should be extracted and reused. This will improve the initial loading time and reduces the overall bundle size.</li> <li> <strong>Lazy loading </strong>— This ties back to the previous point. Lazy loading is a technique that allows us to defer the loading of non-critical resources or content until they are actually needed. Implementing Lazy loading could significantly improve the performance and the user experience. It will be particularly beneficial for large media files, such as images or videos, which are not immediately visible to the user.</li> <li> <strong>Remove redundant imports / Bundle cost optimization</strong> — We know that the bigger the bundle that we serve to the user, the more time and resources it will require. This is something to keep in mind while writing code (sometimes we don’t need to import the whole library if we are using only one specific method of it). A great tool that could help with this one is the <em>“</em><strong><em>Import Cost</em></strong><em>”</em> extension for VSCode. It will automatically show you in real-time the size of the package that you are importing (marking with a different color scheme for the bigger packages and urging you for optimizing your imports). Another set of great tools which could help with this are <strong><em>BundlePhobia.com</em></strong> (which helps you find an npm package and its alternatives) and <strong><em>source-map-explorer</em></strong> (which will show you a treemap visualization of the packages in use)</li> <li> <strong>Avoid unnecessary re-renders</strong> — Re-renders are quite costly and will slow down our application or cause a bad user experience. A component gets re-rendered in React by changing its <strong><em>props</em></strong> or <strong><em>state. </em></strong>This hints us that we have to make sure we are properly handling a component’s props and state. One of the most common ways that could be overlooked is the misuse of the <strong>useEffect</strong> hook and its dependencies. We have to make sure that only relevant dependencies are added to the dependency array for every useEffect.</li> <li> <strong><em>Take advantage of useMemo and useCallback </em></strong><em>— </em><strong>useCallback</strong> and <strong>useMemo</strong> are both React Hooks that help optimize the performance of a React application by memoizing values. They both accept a function as an argument and return a memoized version of the function. The difference between them is the type of value they return. <strong>useCallback</strong> returns a memoized callback function, while <strong>useMemo</strong> returns a memoized value. Both hooks can be used to optimize the performance of your React components by avoiding unnecessary re-creations of functions or values.</li> </ol> <h4><strong>Bonus tip:</strong></h4> <p>While performing any of the mentioned optimization methods we would need to have a way to measure if we are improving things and how much. One tool that I have found extremely useful is <a href="https://developer.chrome.com/docs/lighthouse/overview/"><strong>Lighthouse</strong></a><strong>. </strong>Generating Lighthouse reports is a great way to track your progress and get some custom tips. <br>Some of the indicators that you might want to improve are —<strong> First Contentful Pain (FCP), Largest Contentful Pain (LCP), Speed Index (SI),</strong> etc.</p> <h4><strong>Conclusion</strong></h4> <p>The adoption of the techniques mentioned above is crucial for improving the performance of your React application. There might be also other approaches that needs to be done in order to reach peak performance and this is why the usage of tools that will analyze the performance of your application is crucial. <br><em>Performance optimization is not a sprint, but rather a marathon</em>. All of the principles should be kept in mind while writing code and it is wise to make regular revisions in order to deliver high-quality code and avoid introducing technical debt in the future.</p> <h4><em>PS: Here is the list of tools mentioned:</em></h4> <ol> <li><a href="https://bundlephobia.com/"><strong><em>BundlePhobia.com</em></strong></a></li> <li><a href="https://www.npmjs.com/package/source-map-explorer"><strong><em>source-map-explorer</em></strong></a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost"><strong><em>Import Cost extension</em></strong></a></li> <li><a href="https://developer.chrome.com/docs/lighthouse/overview/"><strong><em>Lighthouse</em></strong></a></li> </ol> <img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d47c6cae0fc3" width="1" height="1" alt="">