From 5224fcbf026b7627be1d20a5ff097d1200b66af2 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Thu, 6 Apr 2023 19:33:55 +0200 Subject: [PATCH] NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127) * use useIsomorphicLayoutEffect * Create .changeset/fast-panthers-refuse.md --------- Co-authored-by: Josh Black --- .changeset/fast-panthers-refuse.md | 5 +++++ src/NavList/NavList.tsx | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/fast-panthers-refuse.md diff --git a/.changeset/fast-panthers-refuse.md b/.changeset/fast-panthers-refuse.md new file mode 100644 index 00000000000..016cda4e8d1 --- /dev/null +++ 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 index cd06a1db8b9..8849f17a672 100644 --- 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(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]')