0

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);
Cruclax
  • 394
  • 3
  • 13

1 Answers1

0

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

Community
  • 1
  • 1
Andy_D
  • 4,112
  • 27
  • 19
  • Hey, while this is SUPER useful and I didn't know about it. It's not the case I was asking about, because in my case I'm not updating an object inside a tree but the whole tree. I just found an approach using Immutable. Updating my question – Cruclax Jun 04 '16 at 15:37