Do you feel that you react app perform slower over time? Yes, it is the most common problem we face as Melbourne web developers and apps developers. As our website and application grow, it become slower. But there are several things we can do to improve its performance. We have listed some tips you can try.
Prevent the use of anonymous functions
One of the reasons, your apps slowing down is because you use too many anonymous functions. Anonymous functions aren’t persistent whenever a component inevitably gets rendered again. Unlike named functions that able to allocate a single piece of memory once, JavaScript need to allocate new memory every time this component re-rendered. As a result, your apps need more time to execute one function.
Use PureComponents and memoization techniques
We know that child components in React will automatically re-rendered every time there is a change in props in the parent component. But there are cases where we don’t want certain child components to be re-rendered automatically.
In those scenarios, we recommend you to use PureComment or memo function provided by React. When you use these functions, React will do a comparation between previous props and the newly received props. Those props only will get re-rendered if React notice a different. You can do this by wrapping a functional component with memo function, and in class-based components extend the class from PureComponent.
Avoid mounting/unmounting components frequently
It is quite expensive to mount and unmount components. Other HTML elements got shift around because mounting and unmounting cause a repaint/reflow by the browser. You can use alternative strategy such as setting the CSS opacity to 0, or setting visibility to none, instead of completely removing the element from the DOM. This way, the component will still be in the DOM but invisible, without any performance cost.
Use Virtual rendering whenever necessary
Rendering a list with a large amount of data oftentimes will affect your app’s performance. Instead of rendering them all in once, you should do a process called windowing or virtual rendering. Windowing is a process where you only render a small portion of the data in the list at a time within the visible viewport. Then, you can render more data as the list is being scrolled; hence, the data is displayed only when it is in the viewport.
Conclusion
There are several other methods you can try besides those four tips we listed above to improve your React app’s performance. In our experience, those four are the most effective and most commonly used methods of performance optimization. So, stay open minded and keep learning!