← flaviocopes.com

Next.js, what to do when the state of a component is not refreshed when navigating

Published May 07 2021

I ran in this issue, basically my component has an useState() hook to set some variables and the state was not updated when navigating with the router.

Turns out my custom _app.js, which I copied from the tutorial and was just used to add global styling to the app, had this code:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />

I changed it to:

import { useRouter } from 'next/router'

export default function App({ Component, pageProps }) {
  const router = useRouter()

  return <Component {...pageProps} key={router.asPath} />

and it worked again as expected.

I just had to add the path as key.

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site

Interested in solopreneurship?