From 8b169a2972718599c3fe91e69d577a2a36305602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 10 May 2023 10:57:16 +0200 Subject: [PATCH] chore: fix VisibilityByTheme React hydration issue (#2321) --- packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx | 11 ++++++++++- .../themeHandler.tsx | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx b/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx index c351e1be63e..f3660dda69f 100644 --- 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 index 538fc13332b..e021b15c4e9 100644 --- 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,