Skip to content

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

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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.

  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)