NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (…

…#3127) * use useIsomorphicLayoutEffect * Create .changeset/fast-panthers-refuse.md --------- Co-authored-by: Josh Black <joshblack@github.com>
primer · Apr 6, 2023 · 5224fcb · 5224fcb
1 parent fc2b28a
commit 5224fcb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/fast-panthers-refuse.md b/.changeset/fast-panthers-refuse.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Suppress SSR warning for useLayoutEffect in NavList, use useIsomorphicLayoutEffect instead of useLayoutEffect
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
@@ -13,6 +13,7 @@ import StyledOcticon from '../StyledOcticon'
 import sx, {merge, SxProp} from '../sx'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {useId} from '../hooks/useId'
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 // ----------------------------------------------------------------------------
 // NavList
@@ -110,7 +111,7 @@ function ItemWithSubNav({children, subNav, sx: sxProp = defaultSxProp}: ItemWith
   const subNavRef = React.useRef<HTMLDivElement>(null)
   const [containsCurrentItem, setContainsCurrentItem] = React.useState(false)
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (subNavRef.current) {
       // Check if SubNav contains current item
       const currentItem = subNavRef.current.querySelector('[aria-current]')