React-router producing setState warning

Question

I'm using React, Redux and React-Router. In my MapDispatchToProps() in a React component, I check for a condition and if that condition is true, I call router's browserHistory.push("/newLocation"). For some reason I get this error:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

The funny thing is that my React components are stateless (pure JS functions) so I know I'm not explicitly setting state in a render method. Diving into the error looks like it is react-router that is trying to set the state:

Although even with this warning, the application seems to behave ok. Not sure how to get rid of this warning though.

Why do you have that logic in mapPropsToDispatch in the first place? — taylorc93
mapDispatchToProps should be a pure function meaning it should change nothing outside the function at all and its only effect should be the return value. You could change certain things with side effects but if the effects trickle down to Redux or to React then you will get errors like is happening here. One harmless side effect is console.log. Side effects make for complex applications which is why Redux actively campaigns against them. — DDS
My mapDispatchToProps is still pure-- I don't change state. Whole point was if there was a particular condition when I first enter that component, I just want to "redirect" to another page, otherwise continue normal processing. The onEnter attribute for Route worked perfectly for me. — Los Morales

Incognos Incognos · Accepted Answer · 2016-09-08T16:56:39

The push functionality is setting state. You should use the onEnter functionality built into react-router to test for a condition before entering a route

React-router producing setState warning

1 Answers