These Tips Will Boost Your React Code Performance

Indrek Lasn
Apr 3 · 3 min read

Going from 2500ms to 1500ms wait time can have huge impacts on your UX and conversion rates

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

Here are some performance tips I use with React.


React.memo

If you have a stateless component, and you know your component won’t need re-render, wrap your entire stateless component inside a React.memo function. Take this example:

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 that 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 your 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

“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.” — Dan Abramov.

Read more about Beyond React 16 here.


React.Fragments to Avoid Additional HTML Element Wrappers

If you’ve used React before, 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 that we have an extensive wrapper for every component. The more markup we have to render, the slower our app.

Voilà! No extra markup is necessary.

If you’re curious to learn more about React, I’d check out the “The Road to learn React” book.

Bonus — here’s the shorthand for fragments.

Thanks for reading! ❤

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software Engineer. I try to be kind and friendly. Let’s change the world together for the better. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade