React-redux: Connected component will re-render for no reason if its prop is not a primitive

[sylvhama]

I've noticed that some connected components will re-render even if their props have not changed. The steps to reproduce are:

• Your redux state must be a non primitive value such as {} or [];
• Your connected component must have a props which is non primitive value as well;
• You must dispatch an action.

You can have a look to this codesandbox with react-devtools's Hightlight Updates option to see the third component being updated when clicking on the button.

[markerikson]

Your Test3 example is creating a new array instance in its mapState function, thus causing the component to re-render every time:

const Test3 = connect(() => ({
  test: []
}))(() => <p>Test3 does re-render when an action is dispatched.</p>);

Don't do that :)

It's the same thing if you call someArray.map() as well.

See the Redux FAQ entry on components re-rendering, and my post Practical Redux, Part 6: Connected Lists and Performance.