5 Go-To Performance Optimization Techniques For a React App

Ensuring fast and seamless user experience in a web app is a critical aspect of attracting and subsequently retaining users. Walmart reported increased conversion by 2 percent per the second improvement in load time and Amazon recorded a 1 percent loss in revenue per 100ms site load delay. Given how big these giants are, the numbers translate to millions of dollars gained and lost based on a fraction of a second. Having established the importance of performance, the key to increase performance is to utilize various optimization techniques which are behind the curtain. In this article, I’ll list out a few techniques in React. React.memo and React Pure Component Consider this react component where the parent component “componentParent” has two child components, “componentOne” and “ComponentTwo”.

ComponentOne has a button that increases the count state set in the parent component. So, ideally when countOne changes on the click of the button, only componentOne should re-render. That is not the case with componentTwo rerendering as well despite its props remaining unchanged. This is due to the parent component re-rendering and can subsequently cause a performance bottleneck if there are a lot of child components under the parent. It is the same scenario with the render method in class components as well. In order to optimize the re-rendering process, react authors came up with React.memo and React pure component for functional and class components respectively, both provide a way to compare old and new props and rerendering only if there is a change.