Next.js Discord

Discord Forum

Client component loses React state on navigation

Unanswered
Short-billed Dowitcher posted this in #help-forum
Open in Discord
Short-billed DowitcherOP
The following route is being used:

/[lang]/[[…slug]]/page.tsx

Here any client components are fully re-created on navigation e.g. from /en/1 to /en/2. Therefore all useState() values are lost and for instance network data is fetched again to set the initial state in useEffect(). This results in UI flickering in my case.

In lower routes this is not the case e.g. /[lang] client components keep their state. It makes no difference if the client components are in layout.tsx or page.tsx.

This happens with Next.js 13.x and 14.x.

Is this a known issue? If not I will open a bug report and try to reproduce it in a test repository.

0 Replies