react router difference between component and render

by

The source code tells the difference:

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

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

When you use component prop, the component is instantiated per every call of Route#render. It means that, for your component that you pass to component prop of Route, constructor, componentWillMount, and componentDidMount will be executed every time the route is rendered.

For example, if you have

<Route path="/:locale/store" component={Store} />

and the user navigates to /en/store, then goes elsewhere, and then navigates back to /en/store, the Store component will be mounted, then unmounted, and then mounted again. It is similar to doing

<Route path="/:locale/store">
  <Store />
</Route>

Compared to that, if you use render prop, the component is evaluated on every Route#render. Remember that every component is a function? This function will be executed as is, without any lifecycle methods. So when you have it like

<Route path="/:locale/store" render={Store} />

you can think of it as

<Route path="/:locale/store">
  {Store()}
</Route>

It saves you runtime because no lifecycle methods are run, but it also has a downside in case Store component has some post-mount lifecycle methods like shouldComponentUpdate that may increase performance as well.

There was a good post on Medium about this performance hack, please take a look at it. It’s written very well and is applicable to React 16, too.

More Related Contents:

  1. How to push to History in React Router v4?
  2. React : difference between and
  3. How to pass params with history.push/Link/Redirect in react-router v4?
  4. React Router v4 renders multiple routes
  5. How to get history on react-router v4?
  6. How to pass params into link using React router v6?
  7. React router changes url but not view
  8. React Router v4 – How to get current route?
  9. Detect Route Change with react-router
  10. Why do I get the error “expressions must have one parent element”, how do I fix this?
  11. What is the best way to redirect a page using React Router? [closed]
  12. You should not use outside a
  13. Simple Conditional Routing in Reactjs
  14. How do I pass state through React_router?
  15. react router v4 default page(not found page)
  16. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  17. Invariant failed: You should not use outside a
  18. Nested Routes not rendering with React Router v4
  19. React Router Dom v6 shows active for index as well as other subroutes
  20. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  21. React router, pass data when navigating programmatically?
  22. react routing is able to handle different url path but tomcat returns 404 not available resources
  23. react router v6 No routes matched location
  24. React Router 4 Nested Routes not rendering
  25. React router 4 does not update view on link, but does on refresh
  26. React: Hide a Component on a specific Route
  27. React Router v4 with multiple layouts
  28. Passing values through React-Router v4
  29. React Router work on reload, but not when clicking on a link
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment