Blog

🚀 React performance quick wins 🚀 - 7 easy ways to improve your React performance - part 2

In part 1 of this react performance quick-wins series, we already learned about the following:

• Always use a key when mapping and no index
• Use React.Fragments instead of divs as parent element
• One useState hook instead of multiple for connected data

The second part of this series brings you another 4 great quick-wins you can apply directly to your code and improve your performance

This Post is Part 2 of a series.

Part 1: 7 easy ways to improve your React performance - part 1

What you can learn from Part 2 of this React performance quick wins series:

• Avoid anonymous functions
• Define objects outside of your component
• React.lazy and React.Suspense
• Virtualized lists

Avoid anonymous functions

It's easy to use an anonymous function when you want to add a quick callback function to a component.

import * as React from 'react'

const MyComponent = () => {
  return (
    <button onClick={() => console.log('Button clicked')}>Click me!</button>
  )
}

export default MyComponent

But if you're on the lookout for a quick performance win, that's something you can avoid.

Anonymous functions aren't assigned an identifier like const/let/var. This means they are not persistent whenever this functional component gets rendered again. So JavaScript has to create them again and again, on every rerender.

To be clear: for most cases this isn't a real problem! The react docs event state that it's okay to use anonymous functions in render methods ↗ Opens in new tab. It becomes an actual problem if you're rendering a lot of elements, like thousands of table cells, which all make use of an anonymous function.

There is an easy way to solve this. You can change it to a named function and move it outside of the component.

import * as React from 'react'

const handleClick = () => {
  console.log('Button clicked')
}

const MyComponent = () => {
  return <button onClick={handleClick}>Click me!</button>
}

export default MyComponent

That's it for quick-win number 4: avoid anonymous functions!

Define objects outside of your component

Here comes quick-win number 5. Something similar as described above can be applied to objects.

If you define an object as an object literal and pass it in as props, this object will have to be recreated on every rerender.

import * as React from 'react'

const MyComponent = () => {
  return (
    <div style={{ textAlign: 'center', fontSize: '14px' }}>
      This is the text of my component.
    </div>
  )
}

export default MyComponent

Instead, define your object outside of the component. Now it is created once on the initial render and not being touched on every rerender.

import * as React from 'react'

const DIV_STYLES = {
  fontSize: '14px',
  textAlign: 'center',
}

const MyComponent = () => {
  return <div style={DIV_STYLES}>This is the text of my component.</div>
}

export default MyComponent

Performance quick-win, whoop whoop! 🚀

React.lazy and React.Suspense

With React.lazy, you can "lazy load" your components. This means your component is only rendered when it is truly needed and not loaded unnecessarily.

The less you need to load, the better your performance!

This can easily be combined with React.Suspense for rendering some fallback content.

I wrote a whole Today-I-learned post about this topic; check it out here: Today I learned: React Suspense lazy-loading

That's also a great way to improve your React performance without too much effort.

Virtualized lists

If you've worked with long lists or tables with many rows in React, you know how much this can impact your performance. This is because you have to render a lot of content, usually many divs.

We already learned that too many DOM nodes are not a good idea. Also updates and rerenders can be painful because they take just way too long.

With virtualized lists, only the list items that are actually in the viewport are rendered. That's pretty cool. But how does this work? Don't worry; you won't have to build this yourself. There are already excellent tools out there that do the job for you.

Check out react-virtualized ↗ Opens in new tab by Brian Vaughn.

It's pretty easy to use, and you don't need to worry about displaying long lists and tables anymore.

So that's it; these are my 7 easy ways to improve your React performance. Did you already know all of them? Do you have any additional tips? Let me know!

Just send me an email ↗ Opens in new tab or message me on Twitter ↗ Opens in new tab.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco