Fix hydration issues (#6309)

* fix: fix hydration issues * chore: add color mode config and suspense
chakra-ui · Jul 13, 2022 · fb3c093 · fb3c093 · vercel · Jul 13, 2022
1 parent 46b4954
commit fb3c093
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 32 deletions.
diff --git a/.changeset/quiet-spiders-lay.md b/.changeset/quiet-spiders-lay.md
@@ -0,0 +1,5 @@
+---
+"chakra-nextjs-ts": patch
+---
+
+add color mode config and suspense
diff --git a/.changeset/tiny-rabbits-admire.md b/.changeset/tiny-rabbits-admire.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/color-mode": patch
+"@chakra-ui/react-env": patch
+---
+
+fix hydration issue
diff --git a/examples/nextjs-typescript/Chakra.tsx b/examples/nextjs-typescript/Chakra.tsx
@@ -5,6 +5,7 @@ import {
 } from "@chakra-ui/react"
 import { GetServerSidePropsContext } from "next"
 import { ReactNode } from "react"
+import theme from "./theme"
 
 interface ChakraProps {
   cookies?: string
@@ -15,6 +16,7 @@ export const Chakra = ({ children, cookies }: ChakraProps) => {
   return (
     <ChakraProvider
       colorModeManager={cookies ? cookieStorageManager : localStorageManager}
+      theme={theme}
     >
       {children}
     </ChakraProvider>

diff --git a/examples/nextjs-typescript/pages/_document.tsx b/examples/nextjs-typescript/pages/_document.tsx
@@ -6,6 +6,7 @@ import NextDocument, {
   NextScript,
   DocumentContext,
 } from "next/document"
+import theme from "../theme"
 
 export default class Document extends NextDocument {
   static getInitialProps(ctx: DocumentContext) {
@@ -17,7 +18,7 @@ export default class Document extends NextDocument {
       <Html>
         <Head />
         <body>
-          <ColorModeScript />
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
           <Main />
           <NextScript />
         </body>

diff --git a/examples/nextjs-typescript/pages/index.tsx b/examples/nextjs-typescript/pages/index.tsx
@@ -3,6 +3,7 @@ import { Chakra } from "../Chakra"
 import { Layout } from "../components/Layout"
 import { Logo } from "../components/Logo"
 import { NextChakraLink } from "../components/NextChakraLink"
+import { Suspense } from "react"
 
 interface IndexProps {
   cookies?: string
@@ -11,33 +12,35 @@ interface IndexProps {
 const IndexPage = ({ cookies }: IndexProps) => (
   <Chakra cookies={cookies}>
     <Layout title="Next.js + TypeScript example">
-      <Box textAlign="center" fontSize="xl">
-        <Grid minH="100vh" p={3}>
-          <VStack spacing={8}>
-            <Logo h="40vmin" pointerEvents="none" />
-            <Text>
-              Edit <Code fontSize="xl">pages/index.tsx</Code> and save to
-              reload.
-              <br />
-              <br />
-              <NextChakraLink href="/properties" color="teal.500">
-                View the properties
-              </NextChakraLink>{" "}
-              to see the Nextjs <Code fontSize="xl">&lt;Link&gt;</Code> in
-              action
-            </Text>
-            <Link
-              color="teal.500"
-              fontSize="2xl"
-              href="https://chakra-ui.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learn more about Chakra
-            </Link>
-          </VStack>
-        </Grid>
-      </Box>
+      <Suspense fallback="Loading...">
+        <Box textAlign="center" fontSize="xl">
+          <Grid minH="100vh" p={3}>
+            <VStack spacing={8}>
+              <Logo h="40vmin" pointerEvents="none" />
+              <Text>
+                Edit <Code fontSize="xl">pages/index.tsx</Code> and save to
+                reload.
+                <br />
+                <br />
+                <NextChakraLink href="/properties" color="teal.500">
+                  View the properties
+                </NextChakraLink>{" "}
+                to see the Nextjs <Code fontSize="xl">&lt;Link&gt;</Code> in
+                action
+              </Text>
+              <Link
+                color="teal.500"
+                fontSize="2xl"
+                href="https://chakra-ui.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Learn more about Chakra
+              </Link>
+            </VStack>
+          </Grid>
+        </Box>
+      </Suspense>
     </Layout>
   </Chakra>
 )

diff --git a/examples/nextjs-typescript/theme.ts b/examples/nextjs-typescript/theme.ts
@@ -0,0 +1,10 @@
+import { extendTheme, type ThemeConfig } from "@chakra-ui/react"
+
+const config: ThemeConfig = {
+  initialColorMode: "system",
+  useSystemColorMode: true,
+}
+
+const theme = extendTheme({ config })
+
+export default theme
diff --git a/packages/color-mode/src/color-mode-provider.tsx b/packages/color-mode/src/color-mode-provider.tsx
@@ -107,7 +107,7 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useSafeLayoutEffect(() => {
+  React.useEffect(() => {
     const managerValue = colorModeManager.get()
 
     if (managerValue) {
@@ -121,8 +121,7 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
     }
 
     setColorMode(defaultColorMode)
-    //
-  }, [colorModeManager, defaultColorMode, initialColorMode, getSystemTheme])
+  }, [colorModeManager, defaultColorMode, initialColorMode, setColorMode])
 
   const toggleColorMode = React.useCallback(() => {
     setColorMode(resolvedValue === "dark" ? "light" : "dark")

diff --git a/packages/env/src/env.tsx b/packages/env/src/env.tsx
@@ -1,6 +1,7 @@
 import { isBrowser, __DEV__ } from "@chakra-ui/utils"
 import React, {
   createContext,
+  startTransition,
   useContext,
   useMemo,
   useState,
@@ -57,7 +58,9 @@ export function EnvironmentProvider(props: EnvironmentProviderProps) {
       {mounted && (
         <span
           ref={(el) => {
-            if (el) setNode(el)
+            startTransition(() => {
+              if (el) setNode(el)
+            })
           }}
         />
       )}