fix(PageLayout): update useLayoutEffect to isomorphic effect (#2432)

* fix(PageLayout): update useLayoutEffect to isomorphic effect

* refactor(useResponsiveValue): use fallback value during SSR

* chore: add changeset

.changeset/healthy-icons-build.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update useStickyPaneHeight and useMedia to not warn during SSR

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)) {

src/hooks/useResponsiveValue.ts

@@ -49,9 +49,9 @@ export function isResponsiveValue(value: any): value is ResponsiveValue<any> {
 export function useResponsiveValue<T, F>(value: T, fallback: F): FlattenResponsiveValue<T> | 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