by Indrek Lasn

These tips will boost your React code’s performance

React is popular because React applications scale well and are fun to work with. Once your app scales, you might consider optimizing your app. Going from 2500ms wait time to 1500ms can have huge impacts on your UX and conversion rates.

Note: This article was originally published here — read the original too!

So without further ado, here are some performance tips I use with React.

React.memo

If you have a stateless component and you know your component won’t be needing re-render, wrap your entire stateless component inside a React.memo function. This:

becomes the following:

We wrap the entire stateless component inside a React.memo function. Notice the profile.displayName which helps to debug. More info about component.displayName

React.memo is the equivalent to the class version React.PureComponent

React.PureComponent

PureComponent compares props and state in shouldComponentUpdate life cycle method. This means it won’t re-render if the state and props are the same. Let’s refactor the previous stateless component to a class-based component.

If we know for sure the props and state won’t change, instead of using Component we could use the PureComponent.

componentDidCatch(error, info) {} Lifecycle method

Components may have side-effects which can crash the app in production. If you have more than 1000 components, it can be hard to keep track of everything.

There are so many moving parts in a modern web app; it’s hard to wrap one’s head around the whole concept and to handle errors. Luckily, React introduced a new lifecycle method for handling errors.

The componentDidCatch() method works like the JavaScript catch {} block, but for components. Only class components can be error boundaries.

React.lazy: Code-Splitting with Suspense

Dan explains:

“We’ve built a generic way for components to suspend rendering while they load async data, which we call suspense. You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic. On a fast network, updates appear very fluid and instantaneous without a jarring cascade of spinners that appear and disappear. On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written. The app stays responsive throughout.”

Read more about Beyond React 16 here.

React.Fragments to Avoid Additional HTML Element Wrappers

If you used React you probably know the following error code:

“Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag”.

React components can only have a single child. This is by design.

The following code will crash your app. The antidote to this is to wrap everything in a single element.

The only problem with the following code is we have an extensive wrapper for every component. The more markup we have to render, the slower our app.

Fragments to the rescue!

Voilà! No extra mark-up is necessary.

Bonus: Here’s the shorthand for Fragments.

Thanks for reading! Check out my Twitter for more. Here are some cool articles you might enjoy:

How to setup a powerful API with GraphQL, Koa and MongoDB
Building API's is super fun! Especially when you can leverage modern technologies such as Koa, GraphQL and MongoDB. Koa…www.strilliant.comHow to improve your asynchronous Javascript code with async and await
How to improve your asynchronous Javascript code with async and await If you've had the chance to observe modern…www.strilliant.comHere are some of the best resources to improve your coding skills
There are lots of high-quality coding tutorials, books, and overall resources on the web. I've gathered the very best…www.strilliant.comHere's yet another list of exciting projects to build
Coding is a skill which is acquired through hard work and passion. To become good at something, one must put in the…www.strilliant.com👆 Pointer events with React - The why, how, and what?
Back in the good old days we only had a mouse and listening for events was simple. The web content assumed the user's…www.strilliant.com