Render method call twice

[oliviertassinari]

That may be linked to #193.
I have noticed, when migrating from redux-router to this repository (v2.0.2), that the render method is called twice.
This happens when I'm calling routeActions.push().

• The first render is triggered on the component I'm transitioning from.
  I think that it should be the component I'm transitioning to.
• The second render is triggering on the component I'm transitioning to.
  The trigger of this method seems asynchronous (out of the middleware chain). I think that it shouldn't be here.

[timdorr]

Route rendering is always an asynchronous process because router has a lot of async handling baked in (route components can be retrieved asynchronously). So the second render you're seeing is expected.

The first, however, is not. Are you connecting your component to some part of state that's updated by the route actions?

[oliviertassinari]

Route rendering is always an asynchronous

Alright, so I will try to understand why this first render occurres. That could be an issue on my side.

[taion]

I think this is an unavoidable consequence of how we integrate React Router into Redux.

It might be possible to do something very clever with unstable_batchedUpdates, but I'm not entirely sure here.

[timdorr]

@taion I'm not so sure. Most people complain about router not re-rendering components when transitioning within the same branch of their route tree.

In any case, this sounds like something not related to redux-simple-router. If something does present itself as specifically our fault, I can reopen this.

[Elijen]

@oliviertassinari Are you by any chance using hashHistory instead of browserHistory? I noticed this problem went away after changing to browserHistory.

[oliviertassinari]

@Elijen I was using it. I have upgraded to the latest release. The issue is gone on my side.

[minhkhanb]

render function in Component was run twice. Let know me why? Help me? Please!

[GuillaumeMunsch]

Any news on this ?

[gndplayground]

<Router history={history} key={Math.random()}>
        <Route path='/' component={AppContainer}>
            <Route path={routesList.login} getComponent={function (path, cb) {
                require.ensure([], (require) => {
                    cb(null, require('./login/Login').default);
                });
            }}/>
            <Route path={routesList.logout} getComponent={function (path, cb) {
                require.ensure([], (require) => {
                    cb(null, require('./login/Login').default);
                });
            }}/>
            <Route onEnter={requireAuth} getComponent={
                function (path, cb) {
                require.ensure([], (require) => {
                    cb(null, require('./dashboard/Dashboard').default);
                });
            }}>
                <Route path={routesList.dashboard} getComponent={function (path, cb) {
                    require.ensure([], (require) => {
                        cb(null, require('./dashboard/pages/Home').default);
                    });
                }}/>
                <Route path={routesList.materialComponent} component={Material}/>
            </Route>
        </Route>
        <Route path='/test' component={Test}>
        </Route>
    </Router>

Supposed I have a router like this. When I go to dashboard, it seems my API called twice. So the dashboard component render twice. I checked with two life cycle below

componentDidMount() {
        console.log('did mount');
    }

    componentDidUpdate() {

        console.log('updated');
    }

My Dashboard component output ('updated');. Hm, so maybe some thing change in next props, next states in life cycle. So I addded two console ouput in shouldComponentUpdate

 shouldComponentUpdate(nextProp, nextState) {
       // Use lodash is Equal
        console.log(_.isEqual(nextProp, this.props));
        console.log(_.isEqual(nextState, this.state));

        return true;

    }

Both state and props is equal to each next state and next props :(. So I change my lifecycle to

shouldComponentUpdate(nextProp, nextState) {
        return !(_.isEqual(nextProp, this.props) && _.isEqual(nextState, this.state));
    }

With this way, my dashboad component won't update if props and states don't change. So my dashboard won't render twice.

In my case it's the solution for me @GuillaumeMunsch

[ivorpad]

@Elijen Thanks to your comment I fixed my bug. hashHistory was causing the render() method to render twice and it was returning a wrong this.props.params object with undefined values from a route.

Do you know why is this by any chance?

[13luck]

Try to downgrade to react-router@2.8.0

[kdenz]

@Elijen Thank you! It solved my problem as well. In my case with react-router 3.0, the render() method rendered 2 extra times. It seems to be a weird bug with hash history.

[hulin32]

Downgrade to react-router@2.8.0, also doesn't work.
Config like this:

"react-redux": "^5.0.2",
"react-router": "2.8.0",
"react-router-redux": "^4.0.7",

[amangeot]

Hello,
I had the same issue with multiple route renders. This lead to potential errors with authentication redirections and analytics.

Latest release react-router-redux solved the issue:

"react-redux": "5.0.2",
"react-router": "3.0.2",
"react-router-redux": "4.0.7" ---> "4.0.8",

Thank you,

[shanSyapse]

This doesn't work for us:

"react-redux": "5.0.2",
"react-router": "3.0.2",
"react-router-redux": "4.0.7" ---> "4.0.8",

We installed the same version and still get the render twice error

[enheit]

I had the same issue and fix it by upgrading react-router-redux to 4.0.8.

JSON looks like:

"react-redux": "5.0.2",
"react-router: "3.0.5",
"react-router-redux": "4.0.8"