DEV Community

loading...
Cover image for React Router  - Route ( WTF Moment )

React Router - Route ( WTF Moment )

scorreaui profile image Santiago Correa ・1 min read

Recently I was working on a project which consisted of books, and I realized that my whole web app was mounting and unmounting instead of the components re-rendering.

More details:

The project consisted of 2 pages.

Here's a quick wireframe I whipped up:
Alt Text

  1. Home
  2. Search

I used react-router to create the navigation between pages.

What I didn't know, until I further read their documentation, is that if you use the prop component in <Route> it uses React.createElement to create a new React element from the given component.

That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component.

This caused undesired behavior which was when I was on the search page and updated the App state it would refresh everything and I would lose the state I had in the Search page.

Instead, to just make sure the component updates and doesn't mount and unmount when there is an update, use render.

<Route
  path='/'
  exact
  render={() => ( 
   <Home 
    currentlyReading={this.state.currentlyReading} 
    read={this.state.read}
    wantToRead={this.state.wantToRead}
    updateBookShelf={(book, shelf) => 
    this.updateBookShelf(book, shelf)} />
  )}
></Route>               
Enter fullscreen mode Exit fullscreen mode
<Route
  path='/'
  exact
  render={() => ( 
   <Search 
    allBooks={this.state.books}
    updateBookShelf={(book, shelf) => 
    this.updateBookShelf(book, shelf)} />
  )}
></Route>
Enter fullscreen mode Exit fullscreen mode

Summary

  • Component unmounts and mounts a new component.
  • Render updates components, instead of unmounting and mounting.

Discussion (8)

pic
Editor guide
Collapse
limxingzhi profile image
XING • Edited

For anyone curious, this is the documentation for the specific mounting behavior mentioned by the author : reactrouter.com/web/api/Route/rend...

Which kinda makes sense doesn’t it. React aside, typical web based routing that serves different HTML pages based on the URL will definitely not retain your local state between routes unless you implement some sort of store or caching solution. The routing behavior of unmounting a component when the URL changes sort of fits into that narrative.

I am curious though, did you notice any performance difference between using the render prop VS the child node?

Edit: store or caching solution

Collapse
scorreaui profile image
Santiago Correa Author

Hi there,

No i didn’t really notice any performance improvements between using component and render

Collapse
hootdunk profile image
HootDunk

I'm so glad you made this post. I hit this same snag on a person project and never came to the realization. Good to know it was in the docs the whole time and that I probably should have looked harder!

Collapse
scorreaui profile image
Santiago Correa Author

Yeah, I know. I was stuck for a little while as well, and that’s why I decided to share it. :)

Collapse
amaggi profile image
Agustin Maggi • Edited

Try next.js. With it you do avoid all of these potential problems.

Collapse
scorreaui profile image
Santiago Correa Author

I usually use Next.js, but I like to try different things XD. I also have used gatsby and no prob either but that was more for a blogging site.

Collapse
mainendra profile image
Mainendra

Wouter is good alternative if you want to try. github.com/molefrog/wouter

Collapse
scorreaui profile image
Santiago Correa Author

I’ll take a look in a future project, thank you.