- Published on
React Router Render vs Component
- Authors
- Name
- Yair Mark
- @yairmark
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.