= nodejs/next/posts
{file}
The goal of this example is to understand when states and effects happen when changing between different routes that use the same component.
Behavior is follows:
* visit: http://localhost:3001/1
* click `count++`. This makes `count: 1`
* click "2" to visit http://localhost:3001/2
* outcome: count is still 1
This is likely because in <React> the state kept in the virtual DOM structure, and identical structure implies identical state. So when we change from post 1 to 2, we still have a `Post` object, and state is unchanged.
Next if we click:
* "Index" to go to http://localhost:3000
* "1" to go to http://localhost:3001/1
then the count is back to 0. This is because we changed the `Post` object in the DOM to `Index` and back, which resets everything.
This example also illustrates how to prevent this from happening with <useEffect>.
Bibliography:
* https://stackoverflow.com/questions/63143334/how-to-not-persist-state-between-next-js-dynamic-routes
Back to article page