Shallow Routing incorrectly recreate/remount component (lose state)

[ivanwidj]

Run next info (available from version 12.0.8 and up)

No response

What version of Next.js are you using?

12.0.8 (also tried with 11.1.3)

What version of Node.js are you using?

16.5.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start, Netlify

Describe the Bug

First shallow routing after redirect from another page will incorrectly remount component (any component state will be reset). Subsequent shallow routing within the same page works as expected (keeping component state).

Expected Behavior

Shallow routing within the same page should keep component state

To Reproduce

• create 2 pages (i.e. page A and B)

• In page B component, add some local state

const [value, setValue] = useState('initial');

• From page A redirect to page B

router.push({ pathname: '/B/[slug], query: { slug: '1' } })

• In page B, update the local component state

setValue('updated');

and then do shallow routing to update the slug

router.push({ pathname: '/B/[slug], query: { slug: '2' } })

the state value will reset to initial (component recreated).

• Subsequent shallow routing works as expected and keep the state value

[ivanwidj]

any update on this?

[jiyonghong]

I'm having the exact same issue with my shallow routing on tab components. Any update on this?

[ajjack50n]

I am experiencing same issue on 12.2.0

[Multiply]

We're experiencing the same issue on dynamic paths. Still investigating on our end.

[alc0034]

I am having the exact same issue with dynamic paths and shallow routing. (v12.3.0)

[Multiply]

It turns out that our issue was related to an older version of next-i18next. When pushing changes to the router, it would unset the locale of the i18next provider, causing the whole page to re-render, losing state.

After updating to the latest version, it keeps the locale around, and this issue went away.

[mfnash]

It turns out that our issue was related to an older version of next-i18next. When pushing changes to the router, it would unset the locale of the i18next provider, causing the whole page to re-render, losing state.

After updating to the latest version, it keeps the locale around, and this issue went away.

I use newest version of next-translate (1.6.0) but this lose state problem still happen. Any suggest ?

[rtrembecky]

It turns out that our issue was related to an older version of next-i18next. When pushing changes to the router, it would unset the locale of the i18next provider, causing the whole page to re-render, losing state.

After updating to the latest version, it keeps the locale around, and this issue went away.

@Multiply thanks for this. I was able to track that my whole _app was getting remounted, but I didn't think of appWithTranslation wrapper being the culprit. For anyone looking for more information, they fixed it in v10.3.0: https://github.com/i18next/next-i18next/releases/tag/v10.3.0 (I actually tested 10.2.0 vs 10.3.0 to see the difference.)