Connected-react-router: Weird renders on connected Components

[3nvi]

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 :)

[supasate]

It should be fixed in v6.1.0. Please let me know if it helps and feel free to re-open this issue if the problem still exists.

[3nvi]

Hey there and happy new year! Your changes fixed my issue partially.

Now the components don't re-render on every redux action, but they do re-render on the connected-react-router's actions, regardless of whether they are subscribed to it or not.

I made a change to my previous example and instead of manually firing a window.store.dispatch, I now have a <Link> component that, when clicked, triggers the same behaviour as the one described in the original issue.

To validate that, please revisit the following link:

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

and click on the "click me" link. You will see the "rendered" message being fired in the console all the time. This behaviour is not there if i replace <ConnectedRouter> with <Router>.

I believe this has to do with this comment: https://github.com/supasate/connected-react-router/pull/208#issuecomment-448952826

Let me know,

Cheers :)

P.S. I can't re-open an issue, when I wasn't the one to close it. Let me know if you want me to create a separate issue

[afitiskin]

@3nvi issue could be solved with using PureComponent:

Change your component's code to the following:

class MyComponent extends PureComponent {
  render() {
    console.log("rendered");
    return <Link to="/">Click me</Link>;
  }
}

In console you will see "rendered" message only once

[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 :/

[jancama2]

I'm getting the same issue. PureComponent solves the problem but I really don't want to use it for all my wrapped components since connect() already does it.

@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]

class Dummy extends React.PureComponent {
  constructor(props) {
    super(props);
    console.warn('DUMMY CONSTRUCTOR');
  }
  componentDidMount() {
    console.log('DUMMY MOUNT');
  }
  render() {
    return <div>DUMMY</div>;
  }
}

const MainRouter: React.FC = () => {
  return (
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/" exact component={Dummy} />
      </Switch>
    </ConnectedRouter>
  );
};

export default MainRouter;

This causes 2x the constructor to be called and 1x the componentDidMount. How is this possible?

[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