SSG Dynamic route doesnt reset state on route change

[danilockthar]

Hi, im making SSG dynamic routes with getstaticpath and getstaticprops. But im not getting fully reset of state when i change url on client side.

The "x1" product items and the border color are persisting even in urlchange. That info comes from an state that i set when page init then change when i click and add more quantity. The expected is to restart all the page and states on route url changes.

const [prods, setProds] = useState(data.products)

what could be wrong ?

[good-idea]

It's possible that React is not re-rendering your page component from scratch when you change the URL. For instance, this:

export default MyPage = ({ products }) => {
  return <MyProductView products={products} />
}

will update with the different products based on the new URL. But, in react's mind, it's the "same" component, so any previous state will still be around. If this is the issue, you can fix it by adding a key to the main component:

export default MyPage = ({ pageId, products }) => {
  return <MyProductView key={pageId} products={products} />
}

By doing this, you're telling React that MyProductView is a different instance of the component, and it will re-render it from scratch, without any previous state.