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:

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>               

<Route
  path='/'
  exact
  render={() => ( 
   <Search 
    allBooks={this.state.books}
    updateBookShelf={(book, shelf) => 
    this.updateBookShelf(book, shelf)} />
  )}
></Route>

Summary

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