Published on

React Router Render vs Component

Authors

On a component I was working on today I added react-router so that I could use multiple pages on my webapp. The pages that the router had to use had to be passed props which you can easily do in react-router using:

...
<Route exact path="/" component={() => <YourComponent prop1={this.props.prop1} prop2={this.state.someValue} /> } />
...

The problem was that this caused some sort of stackoverflow error as it looked like component in Route keeps calling setState. After a quick google for this error I found that component had to be changed to render which fixed the issue.

I dug a bit deeper and found the answer to this behaviour in this stackoverflow answer. The source code it references explains the cause of the issue and why using render fixes it:

if (component) return match ? React.createElement(component, props) : null

if (render) return match ? render(props) : null

The component approach calls React.createElement which seems to run the full React life cycle while the second component simply renders what is there which does not seem to call the full life-cycle again.