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.

Photo by Analia Baggiano on Unsplash

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.

--

--

--

No Matter What People Tell You, Words And Ideas Can Change The World.

Recommended from Medium

Similarities between (Hegel’s world — Plato’s worlds) vs ( Classical Object Oriented Programming…

How to create an object-detector in JavaScript.

Javascript ES6 features, scope and hoisting

MemeFighters DevBlog : #1, Creating the Lobby

Shallow Cloning vs Deep Cloning | Objects | JavaScript

Building simple count app with function component in ReactJS

R SHINY TIPS AND TRICKS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amanda M Johnson

Amanda M Johnson

Full Stack Software Engineer | manda.m.johnson@gmail.com

More from Medium

Let’s Get a Handle on Event Handlers

Unit test in React

React Crash Course — Styling the Application

React Forms and How To Control Them