Next.js Discord

Discord Forum

Nextjs 13 ChakraProvider Re-render?

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
In Chakra UI, is wrapping each of my pages with the ChakraProvider component making it re-render the theme every time I change a page?

So my root layout is:
 return (
    <html lang="en">
      <Head />
      <body>{children}</body>
    </html>
  );

But in my components/layout I have: 
 return (
    <div>
      <ChakraProvider theme={theme}>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <NavBar />
        {children}
        <Footer />
      </ChakraProvider>
    </div>


"This fixed my flashing white page bug, but is it a bad idea since I wrapped all my other pages in this component/layout page? For example:


app/app.tsx
  return (
    <main>
      <Layout>
        <LandingPage />
      </Layout>
    </main>
  );

app/faq/app.tsx
  return (
    <Layout>
      <FAQSection />
    </Layout>
  );

Wrapping my root layout was causing some hydration errors so this was the only solution that worked a the time I made this.

0 Replies