DEV Community

Cover image for React Router  - Route ( WTF Moment )
Santiago Correa
Santiago Correa

Posted on

React Router - Route ( WTF Moment )

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.

Top comments (9)

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

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

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

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

Iโ€™ll take a look in a future project, thank you.

Collapse
 
anthonyfinix profile image
Anthony Finix

Thanks a lot.