From 7867f82240bc593a76b37754c257c35d450efea2 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Thu, 6 Apr 2023 13:47:43 +0200 Subject: [PATCH 1/2] use useIsomorphicLayoutEffect --- src/NavList/NavList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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]') From 0896a4dc015f1e108cbbe02842c3b5756d40911e Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Thu, 6 Apr 2023 13:51:33 +0200 Subject: [PATCH 2/2] Create .changeset/fast-panthers-refuse.md --- .changeset/fast-panthers-refuse.md | 5 +++++ 1 file changed, 5 insertions(+) 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