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

Route1:

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

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

Route2:

 <Route
     path="/dashboard"
     ponent={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 ponent, how can I use the render prop (or another approach) and also prevent unnecessary ponent re-renders?

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

Route1:

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

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

Route2:

 <Route
     path="/dashboard"
     ponent={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 ponent, how can I use the render prop (or another approach) and also prevent unnecessary ponent re-renders?

• javascript
• reactjs
• react-router

1 Answer 1

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.