chore: fix VisibilityByTheme React hydration issue (#2321)

dnbexperience · May 10, 2023 · c4830f1 · c4830f1
1 parent 373f162
commit c4830f1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx b/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx
@@ -30,7 +30,16 @@ export default function VisibilityByTheme({
   visible,
   hidden,
 }: VisibilityByThemeProps) {
-  const theme = useTheme()
+  const themeOrig = useTheme()
+
+  // Deprecated (can be removed when we are full and 100% officially using React v18)
+  // When using React v17,
+  // we need to ovecome a hydration issue.
+  // Later we can change "themeOrig" to "theme" and remove these lines below:
+  const [theme, refresh] = React.useState({})
+  React.useLayoutEffect(() => {
+    refresh(themeOrig)
+  }, [themeOrig])
 
   const visibleList = Array.isArray(visible) ? visible : [visible]
   const hiddenList = Array.isArray(hidden) ? hidden : [hidden]

diff --git a/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.tsx b/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.tsx
@@ -37,7 +37,7 @@ export function useTheme() {
     })
   }, [])
 
-  // Deprecated (can be removed when we are full and 100% officially using Reavt v18)
+  // Deprecated (can be removed when we are full and 100% officially using React v18)
   // When using React v17,
   // we need to ovecome a hydration issue.
   // The JS app gets the correct theme.name,