Does it make sense to compare arrays of objects in React's shouldComponentUpdate?

Question

I am experimenting with React and I was trying to optimize Components update, etc.

I'm building a search component that returns an array of objects. To optimize it I was trying to prevent my component from updating if the search results are the same after performing a new search.

Right now I'm using Immutable to compare them and it works.

Any comments about the performance side of this? Does it make sense to do it in general? Any more efficient ways to do it?

This is my component.

class ItemsListContainer extends React.Component {

  componentDidMount() {
    itemsApi.getItems();
    store.dispatch(loadSearchLayout('items', 'found items'));
  }

  shouldComponentUpdate(nextProps, nextState) {
    let prevItems = Immutable.fromJS(this.props.items);
    let nextItems = Immutable.fromJS(nextProps.items);
    return !Immutable.is(prevItems, nextItems)
  }

  render() {
    return (
      <ItemsList items={this.props.items} />
    );
  }

};

const mapStateToProps = function(store) {
  return {
    items: store.itemsState.items
  };
};

export default connect(mapStateToProps)(ItemsListContainer);

Answer 1

I would leave this as a comment if I had the points necessary to do so.

See Performance issues with a tree structure and shouldComponentUpdate in React / Redux