React router render prop route always re-renders components

Question

I am using React Router and because a function that takes a components needs need to be passed into the route, am rendering the components with a render prop. However, passing in a route as a render prop always results in the component re-rendering. I have tried all the possible lifeCycle hooks, such as shouldComponentUpdate and ComponentDidUpdate, but nothing prevents the component from re-rendering. This route structure is shown below:

Route1:

<Route
  path='/dashboard'
  render={() => dashboardOperator(<Dashboard />)}
/>

Conversely, if I just pass the component in the traditional way, it does not trigger an automatic re-render.

Route2:

 <Route
     path="/dashboard"
     component={DashboardComponent}
 />

However, this routing approach is not effective because it does not allow the function to be passed into the route.

Since lifecycle hooks do not appear to be effective in preventing Route1 (the render prop approach) from re-rendering the component, how can I use the render prop (or another approach) and also prevent unnecessary component re-renders?

Ben Lorantfy Ben Lorantfy · Accepted Answer · 2018-09-27T03:49:59

Try something like this:

class App extends React.PureComponent {
  renderDashboardPage() {
    return dashboardOperator(<Dashboard />)
  }

  render() {
    return (
      <Route
        path='/dashboard'
        render={this.renderDashboardPage}
      />
    );
  }
}

This should work because the function/object reference stays the same across re-renders, so React will realize the props have not changed. Although, be careful about pre-mature optimization.

React router render prop route always re-renders components

1 Answers