1

According to this answer, react redux shallow compares the output of mapStateToProps to figure out whether or not a component needs to be re-rendered..

I have a component which is not re-rendering despite a change in the relevant state. I attached breakpoints to the shallowEqual function in the react redux source code but found out that the function, in fact, returns false(i.e the objects being compared in case of my component are not equal).So ideally my component should re-render. I am thus unable to figure out why my component is not re-rendering. I'm guessing it's because of the performance optimizations in the connect function.

Is there any way to print the outputs of the checks being made in the connect function regarding the re-rendering of a component

Nahush Farkande
  • 5,290
  • 3
  • 25
  • 35

2 Answers2

3

If you want to confirm if it is react-redux optimisations getting in the way, you can turn them off using the options argument of the connect function. e.g.

export default connect(mapStateToProps, mapDispatchToProps, undefined, { pure: false })(YourComponent)

This will bypass all equality checks and allow YourComponent to re-render on every state or prop change. If it's still not re-rendering your component, then the issue is elsewhere.

Remember to remove the option before committing your changes (unless it's actually required).

Michael Peyper
  • 6,814
  • 2
  • 27
  • 44
0

There is another aspect to take in consideration: the reconciliation. Your component might be updated but maybe Reactjs figures out that the DOM result of your component will be the same, so it doesn't need to be re-rendered. I strongly suggest you to implement the function shouldComponentUpdate(nextProps, nextState) inside your component and compare the this.props and nextProps by yourself and understand the situation.

Ematipico
  • 1,181
  • 1
  • 9
  • 14