ReactJs article logo

ReactJs – should I use shouldComponentUpdate?

But isn’t React ultra-fast?

React is well known for being performant “out-of-the” box. Well, this is true but … As an engineer, you’ve probably heard that latest version of a particular framework, language or feature is best in the class but then it turned to have its own problems. React is the same, if you write a code that is not optimised, React won’t be able to work its magic in 100%. Possibly, it still be fast, but it could be faster, trust me.

This short article will give you some useful, real-life examples on how shouldComponentUpdate can save re-rendering of components.

Last few months I’ve spent working on building a React/Redux/React-Router/Sagas framework from scratch. The goal was to create metadata driven UI framework. Along the the way we’ve added many Higher Order Components to achieve specific requirements. One of those HOC is used to pass dynamically calculated values to wrapped component. As some screen in our application use n number of HOC we started seeing some lag i.e. slowness in dealing with form fields (by the way – we used Redux Forms), long transitions between some pages.

What’s the problem?

Quick look at React Developer Tools (with enabled Track React Updates option) in Chrome showed us that a lot of components are re-rendered. So we decided to console.log(this.props.data, nextProps.data) in componentWillReceiveProps to see what we get each time. Surprisingly, data property of old and next props had the same values. So, shouldn’t React avoid re-rendering? Well, strict comparison gave use more insights of what is going on:

this.props.data === nextProps.data // false

So we’ve realised that one of our HOC’s is passing down a new reference to an object all the time. In ideal scenario, when data is not changed, you want to pass same reference. But in our case, it would require a bit of rewrite which simply we couldn’t do it in current release so we decided to make use of shouldComponentUpdate lifecycle method. A code like the one below did the job for use

shouldComponentUpdate(nextProps){
  return this.props.data.a !== nextProps.data.a 
    || this.props.data.b !== nextProps.data.b;
}

When to use it?

You need to use it carefully since you might not re-render a component that you want to re-render. Here are some rules that I follow?

  • if, your component renders children components, then think-twice before you implement shouldComponentUpdate. I’ve already seen when person new to React had hard time figuring out why app is not ‘updating correctly’. Many times this was due to return false from shouldComponentUpdate high in component hierarchy
  • be careful, when comparing new and old props. If, those props contains nested complex objects or arrays, comparing them might be expensive
  • if you need to compare any props from new and old state, you can probably imagine that this condition will look horrible. Think about writing some small, performant utility function to abstract your code. Personally, I like to check what other devs do in their app by reading source code. Often, you can find a code that is doing same thing as yours but in a  better or cleaner way. react-redux makes use of a handy function that does shallow compare of two objects 0 check it here

Leave a Reply

Your email address will not be published. Required fields are marked *