Weird renders on connected Components

There is a strange bug that appears when i switch from a normal <Router> to a <ConnectedRouter>.

Whenever a component is connected, the ConnectedRouter (as mentioned in other issues) re-renders on every store update, but another weird issue occurs that i really can’t pin it down to something particular.

What happens is that, when a random action is fired, any component that is connect-ed renders again, without the wrapping connect HOC actually rendering. What i mean is that in this scenario:

const MyComponent = () => <h1>hi</h1>;

export default connect()(MyComponent);

the Connect(MyComponent) (the HOC returned from connect) doesn’t render, but the MyComponent does. Thus what i end up with, is that on every redux action that changes the global state, every component that is wrapped with connect() will render again regardless of the props it has or has subscribed to.

You can find a a codesandbox version of what I’m describing (using your example configuration) here:

— > https://codesandbox.io/s/yv7yqkx6nz

As you can see, every time MyComponent renders it prints the word “rendered”. If i dispatch a dummy action window.store.dispatch({ type: "" }); then MyComponent renders (although it shouldn’t). If I keep everything as is, but simply replace ConnectedRouter with Router, then MyComponent doesn’t re-render (which is correct since it’s not dependant on any state from redux).

I’m not mistaken this is a performance bug for any app that uses this package.

Let me know 😃

[3nvi]

@afitiskin Hey there,

the thing is that under the hood connect already implements a PureComponent logic (that’s why whenever your redux props stay the same your component doesn’t re-render).

ConnectedReactRouter simply bypasses that while a normal Router doesn’t. Although this will be a solution, I wouldn’t want to force an explicit PureComponent on all my connected components, since they already have that through the connect() HOC 😕

[Elyx0]

Okkay Strict Mode…

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods