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.