5 React Performance Tips

5 React Performance Tips

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.

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.

Becomes the following;

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

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


React.PureComponent

PureComponent compares props and state in shouldComponentUpdate life cycle method, meaning 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) {}

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 eveything. There are so many moving parts in modern web app, it’s hard to wrap one’s head around the whole concept and handling errors. Luckily, React introduced a new lifecycle method for handling errors.

The componentDidCatch() method works like a 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.”

Sneak Peek: Beyond React 16


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.

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!

Voila! No extra mark-up.

Bonus: Here’s the shorthand for Fragments.



Thanks for reading, check out my Twitter for more.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×