I'm facing a frustrating behavior in my current NextJS 14 project.

Here is the situation:

Upon navigating to the /client/[id]/onboarding route, some providers gets mounted in the app, as they are required to keep track of the client state.

The issue I'm facing is that when the user navigates from pages to pages within the /onboarding route, for example navigating from /onboarding/company-information to onboarding/financials, the providers are unmounted and mounted again, which causes the whole state to be refetched and causing flickering UI wherever this state is used.

I have checked several documentations online (NextJS, StackOverflow), even tried to prompt the issue inside Claude Sonnet 3.7 and GPT but nothing seems to work.

The AI is often recommending to wrap the providers around useMemos but that simply doesn't work as the problem isn't that the providers get re-rendered but that they get completely unmounted.

I would really appreciate some help on this, I've been working as a full stack developer for almost 4 years now but I'm fairly new to NextJS so I'm unsure if I'm doing something completely wrong here that I'm not seeing.

Please let me know if you need any other information.

Thank you !

I'm facing a frustrating behavior in my current NextJS 14 project.

Here is the situation:

Upon navigating to the /client/[id]/onboarding route, some providers gets mounted in the app, as they are required to keep track of the client state.

The issue I'm facing is that when the user navigates from pages to pages within the /onboarding route, for example navigating from /onboarding/company-information to onboarding/financials, the providers are unmounted and mounted again, which causes the whole state to be refetched and causing flickering UI wherever this state is used.

I have checked several documentations online (NextJS, StackOverflow), even tried to prompt the issue inside Claude Sonnet 3.7 and GPT but nothing seems to work.

The AI is often recommending to wrap the providers around useMemos but that simply doesn't work as the problem isn't that the providers get re-rendered but that they get completely unmounted.

I would really appreciate some help on this, I've been working as a full stack developer for almost 4 years now but I'm fairly new to NextJS so I'm unsure if I'm doing something completely wrong here that I'm not seeing.

Please let me know if you need any other information.

Thank you !

• reactjs
• next.js

1 Answer 1

in which component are you using the providers ? try to create layout component specifically for the /client/[id]/onboarding route.

For example:

// layout.js
import { Provider } from '...';

export default function OnboardingLayout({ children }) {
  return (
    <Provider>
      {children}
    </Provider>
  );
}