This content originally appeared on DEV Community and was authored by Santiago Correa
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:
- Home
- 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.
This content originally appeared on DEV Community and was authored by Santiago Correa
Santiago Correa | Sciencx (2021-04-16T21:02:54+00:00) React Router – Route ( WTF Moment ). Retrieved from https://www.scien.cx/2021/04/16/react-router-route-wtf-moment/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.