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.
Top comments (9)
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
Hi there,
No i didnโt really notice any performance improvements between using component and render
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!
Yeah, I know. I was stuck for a little while as well, and thatโs why I decided to share it. :)
Try next.js. With it you do avoid all of these potential problems.
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.
Wouter is good alternative if you want to try. github.com/molefrog/wouter
Iโll take a look in a future project, thank you.
Thanks a lot.