From 592f64b060c4d99b3eb553a018b45a74561a5eb6 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 13 Oct 2022 09:58:53 -0500 Subject: [PATCH 1/3] fix(PageLayout): update useLayoutEffect to isomorphic effect --- src/PageLayout/useStickyPaneHeight.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts index 4054a3548b7..967995943c3 100644 --- a/src/PageLayout/useStickyPaneHeight.ts +++ b/src/PageLayout/useStickyPaneHeight.ts @@ -1,6 +1,7 @@ import React from 'react' import {useInView} from 'react-intersection-observer' import {canUseDOM} from '../utils/environment' +import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' /** * Calculates the height of the sticky pane such that it always @@ -49,7 +50,7 @@ export function useStickyPaneHeight() { // if the pane is sticky. const [isEnabled, setIsEnabled] = React.useState(false) - React.useLayoutEffect(() => { + useLayoutEffect(() => { const scrollContainer = getScrollContainer(rootRef.current) if (isEnabled && (contentTopInView || contentBottomInView)) { From d1fb9d206190e6c15a57734d626a42eef4d673b5 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 13 Oct 2022 10:05:09 -0500 Subject: [PATCH 2/3] refactor(useResponsiveValue): use fallback value during SSR --- src/hooks/useResponsiveValue.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/useResponsiveValue.ts b/src/hooks/useResponsiveValue.ts index efdcaa1d561..0d7886ff673 100644 --- a/src/hooks/useResponsiveValue.ts +++ b/src/hooks/useResponsiveValue.ts @@ -49,9 +49,9 @@ export function isResponsiveValue(value: any): value is ResponsiveValue { export function useResponsiveValue(value: T, fallback: F): FlattenResponsiveValue | F { // Check viewport size // TODO: What is the performance cost of creating media query listeners in this hook? - const isNarrowViewport = useMedia(viewportRanges.narrow) - const isRegularViewport = useMedia(viewportRanges.regular) - const isWideViewport = useMedia(viewportRanges.wide) + const isNarrowViewport = useMedia(viewportRanges.narrow, false) + const isRegularViewport = useMedia(viewportRanges.regular, false) + const isWideViewport = useMedia(viewportRanges.wide, false) if (isResponsiveValue(value)) { // If we've reached this line, we know that value is a responsive value From 8d6d6dbc454d73192e15a8591e4e469719f2bd13 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 13 Oct 2022 10:07:19 -0500 Subject: [PATCH 3/3] chore: add changeset --- .changeset/healthy-icons-build.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/healthy-icons-build.md diff --git a/.changeset/healthy-icons-build.md b/.changeset/healthy-icons-build.md new file mode 100644 index 00000000000..61da5db427a --- /dev/null +++ b/.changeset/healthy-icons-build.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update useStickyPaneHeight and useMedia to not warn during SSR