0

I am using React Perf tools to find out wasted rendering/cycles. (react-addons-perf)

I see lot of Connect(component-name) in the list. What does that mean?

Incidentally all these Connects are those where I have passed null as a parameter. (I don't need to use mapStateToProps & mapDispatchToProps). But to use 'dispatch' functionality, I do have to pass null as a parameter to connect.

export default connect(null)(FacilityCard);

How can i save this time wasted?

enter image description here

Abhinav
  • 722
  • 2
  • 11
  • 27
  • Why do you need to use connect when you're not passing a redux state to your props, or dispatch methods to your props? – Sean Kwon Mar 07 '17 at 14:17
  • @SeanKwon : Yes I need to dispatch a method. I am using it like this : this.props.dispatch(updateSearchParams({ selectedAmenityList: tempArray })); – Abhinav Mar 07 '17 at 14:27
  • you're better off using mapdispatchtoprops like so: `const mapDispatchToProps = (dispatch) => ({ updateSearchParams: (amenityList) => dispatch(updateSearchParams(amenityList))})` What you're doing isn't wrong, but it's good to decouple your redux actions from your components. Is there a special reason you're ignoring mapDispatchToProps? – Sean Kwon Mar 07 '17 at 14:38
  • No there is not special reason I did that, it's just more easy and quick to use and implement :) – Abhinav Mar 07 '17 at 15:16

1 Answers1

0

It means the connect High-Order-Component is the one that is doing wasted rendering.
I've found that upgrading react-redux to version 5 (5.0.3 as of this answer) solve the problem is wasted rendering due to connect.

Ido Ran
  • 10,584
  • 17
  • 80
  • 143