TIPS TO
Improve Web Performance in a React Application
As a project naturally develops over time to become more robust with a database that grows in parallel to increasing complexity, there are measures that can be made to ensure that the user experience is the best it can be.
Styling
It is not recommended to use in-line styling in a React app because it will add a lot of repeated code to your program. Not to mention, when making any kind of change it will be easier to make a mistake by not applying the update to all of the right tags. To keep it DRY, there are a few options like using styled components, imported stylesheets, or you could even assign your styling directly to a variable.
React Fragments
React applications work by rendering JSX. In order to be able to render the component, your JSX needs to be wrapped in some type of HTML tag. The convention is to wrap all elements in a parent div when there are multiple lines of code. Instead of using div tags, React fragments can be used. It reduces the cost of rendering by leaving out HTML tags as your application allows.
Functions
When possible, avoid using anonymous functions because they can take up extra memory in your application. Every time a component gets re-rendered, anonymous functions take up a new space in memory since they aren’t stored in your program. An easy fix would be to assign the function to a variable.
shouldComponentUpdate() & React.PureComponent
Before checking components for state changes, React applications will automatically render the virtual DOM. To save some time in the rendering process, invoking the shouldComponentUpdate() function in components will check for any state changes and will only update if the return value is true. To go a step further than that, utilizing React.PureComponent as opposed to React.Component will automatically provide the check that shouldComponentUpdate() performs.
React Developer Tools
If you plan on building React applications, installing the developer tools in the browser is a must. Once installed, you can navigate to the Dev Tools settings and check the “Highlight Updates” box. This will provide you with component highlighting that shows how often your components re-render with the colors blue, green, yellow or red. The warmer colors represent the components with the higher amounts of re-rendering and the opposite goes for the cooler tones.
Conclusion
These are just a few tips that I’ve picked up along the way as my own applications have expanded. There are plenty of other practices that can be implemented to help enhance the user experience, but these tips are a good starting point.
Let me know what has helped you build your React applications so we can swap notes and build a better internet!
If you are new here and liked the article, there are many more like this on Medium. You can sign up to read them for just $5 a month.
Here is the link for unlimited access to every content here on Medium. If you sign up by using this link, I’ll earn a small amount at no additional cost to you.
