React context is reset after page change #54821

Crismon96 · 2023-08-31T07:00:05Z

Crismon96
Aug 31, 2023

I have a context that should span multiple pages. When reading the migration guide I have moved my contexts into a client component:

function ContextWrapper({ children }: PropsWithChildren<{}>) {
 return (<SelectedTokenProvider>{children}</SelectedTokenProvider>)
}

This wrapper is used in my Root Layout:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </head>
      <body className={inter.className}>
        <ContextWrapper>
          <main>{children}</main>
        </ContextWrapper>
      </body>
    </html>
  );
}

My NavigationBar which is also in my custom ContextWrapper does the basic navigation:

function NavigationBar() {
  const pathname = usePathname();

  return (
    <AppBar position="static">
      <Toolbar
        sx={{ backgroundColor: 'background.default', borderBottom: '1px solid', borderBottomColor: 'background.paper' }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
          <div className="flex">
            <Link href="/">
              <img src="assets/svgs/Apollon_logo_negative.svg" alt="Apollon Logo" height="30" typeof="image/svg+xml" />
            </Link>
            <Button
              href="/balance"
              LinkComponent={Link}
              style={pathname === '/balance' ? { textDecoration: 'underline', marginLeft: 32 } : { marginLeft: 32 }}
            >
              Balance
            </Button>
            <Button
              href="/spot"
              LinkComponent={Link}
              style={pathname === '/spot' ? { textDecoration: 'underline', marginLeft: 32 } : { marginLeft: 32 }}
            >
              Spot
            </Button>
            <Button
              href="/pools"
              LinkComponent={Link}
              style={pathname === '/pools' ? { textDecoration: 'underline', marginLeft: 32 } : { marginLeft: 32 }}
            >
              Pools
            </Button>
          </div>

          <EthersAddressLabel />
        </div>
      </Toolbar>
    </AppBar>
  );
}

When I move pages my context is always reset but my context is in a client component in the RootLayout. This is how it should be done, right? It is not my logic that resets the Context, it is unmounted.
Can one of you provide a best practice solution to have app wide state with react context across multiple pages?

jansengunderson · 2023-09-15T17:40:08Z

jansengunderson
Sep 15, 2023

@Crismon96 , I have this working in one app by wrapping {children} in the RootLayout:

export default async function RootLayout({ children }) {
  const { data: { mainNavigation } } = await performRequest({ query: NAVIGATION_QUERY });
  const { data: { allProjects } } = await performRequest({ query: PROJECTS_QUERY });

  return (
    <html lang="en">
      <body>
        <Providers mainNavigation={mainNavigation} allProjects={allProjects}>
          {children}
        </Providers>
      </body>
    </html>
  )
}

And in providers.jsx:

export function Providers({ children, mainNavigation, allProjects }) {
  const { isSticky, element } = useSticky();
  return (
    <CacheProvider>
      <WorkContextProvider allProjects={allProjects}>
      <ChakraProvider theme={theme}>
      <Header mainNavigation={mainNavigation} />
        <StickyHeader mainNavigation={mainNavigation} sticky={isSticky} element={element} />
            <main ref={element}>
                {children}
            </main>
        <Footer />
      </ChakraProvider>
      </WorkContextProvider>
    </CacheProvider>
  )
}

This is working fine in one app, but with another where I am not fetching data in layout.js, but rather in a nested dynamic page I am running into problems.

It seems that we cannot wrap nested pages individually in context providers and retain context state throughout the app. I've tried passing in an empty array to the providers in RootLayout, but route changes reset context instead of maintain current state.

I would love to have some insight on how others are dealing with this.

0 replies

xegulon · 2023-11-02T17:41:30Z

xegulon
Nov 2, 2023

It seems that we cannot wrap nested pages individually in context providers and retain context state throughout the app. I've tried passing in an empty array to the providers in RootLayout, but route changes reset context instead of maintain current state.

Yeah, I have the same problem

0 replies

JAbelP · 2024-01-06T07:18:20Z

JAbelP
Jan 6, 2024

I am also having similar issues, It kinda defeats the point of using context to begin with.

0 replies

keighl · 2024-01-08T21:05:19Z

keighl
Jan 8, 2024

I ran into this as well while trying stop MediaStream tracks upon page unmount. Changes to a context provider in the root layout get "unwound" upon navigation from page to page. Especially with the back button!

Ended up converting my context over to a zustand hook... works as expected with changes persisting across navigation.

0 replies

melutovich · 2024-02-21T12:03:40Z

melutovich
Feb 21, 2024

@Crismon96 You've marked this as resolved, why?

0 replies

trytryty1 · 2024-05-09T23:05:00Z

trytryty1
May 9, 2024

I'm also still having this issue

1 reply

Fodilahy-mena May 13, 2024

#54821 (comment)

Fodilahy-mena · 2024-05-13T13:28:15Z

Fodilahy-mena
May 13, 2024

I think this issue is not resolved yet.
I also faced the same problem using next js.

My solution was using Link from next/link to navigate - React Component that enables client-side transitions between routes. Then it didn't reset the state anymore.
Or you can also use router.push() from next/navigation useRouter() hook which works as expected as well.

0 replies

uudeok · 2025-01-16T12:29:25Z

uudeok
Jan 16, 2025

I’m experiencing a similar issue. The strange thing is that everything works perfectly in the local environment, but in the production environment, the context value resets whenever I navigate between pages. What’s even more puzzling is that, after retrying a few times, it eventually starts working as expected. I’m curious if anyone else has faced a similar problem.

0 replies

React context is reset after page change #54821

Uh oh!

Replies: 8 comments · 1 reply

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 8 comments 1 reply