Improve PageLayout performance (#5942)

Author: hectahertz

.changeset/clean-fried-eggs.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Improve PageLayout performance

packages/react/src/PageLayout/PageLayout.tsx

@@ -88,19 +88,21 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
 
   const [slots, rest] = useSlots(children, slotsConfig ?? {header: Header, footer: Footer})
 
+  const memoizedContextValue = React.useMemo(() => {
+    return {
+      padding,
+      rowGap,
+      columnGap,
+      enableStickyPane,
+      disableStickyPane,
+      contentTopRef,
+      contentBottomRef,
+      paneRef,
+    }
+  }, [padding, rowGap, columnGap, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, paneRef])
+
   return (
-    <PageLayoutContext.Provider
-      value={{
-        padding,
-        rowGap,
-        columnGap,
-        enableStickyPane,
-        disableStickyPane,
-        contentTopRef,
-        contentBottomRef,
-        paneRef,
-      }}
-    >
+    <PageLayoutContext.Provider value={memoizedContextValue}>
       <BoxWithFallback
         ref={rootRef}
         style={

packages/react/src/PageLayout/useStickyPaneHeight.ts

@@ -84,23 +84,33 @@ export function useStickyPaneHeight() {
     }
   }, [isEnabled, contentTopInView, contentBottomInView, calculateHeight])
 
-  function enableStickyPane(top: string | number) {
-    setIsEnabled(true)
-    setOffsetHeader(top)
-  }
-
-  function disableStickyPane() {
-    setIsEnabled(false)
-  }
+  const enableStickyPane = React.useCallback(
+    function enableStickyPane(top: string | number) {
+      setIsEnabled(true)
+      setOffsetHeader(top)
+    },
+    [setIsEnabled, setOffsetHeader],
+  )
+
+  const disableStickyPane = React.useCallback(
+    function disableStickyPane() {
+      setIsEnabled(false)
+    },
+    [setIsEnabled],
+  )
+
+  const memoizedResult = React.useMemo(() => {
+    return {
+      rootRef,
+      enableStickyPane,
+      disableStickyPane,
+      contentTopRef,
+      contentBottomRef,
+      stickyPaneHeight: height,
+    }
+  }, [rootRef, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, height])
 
-  return {
-    rootRef,
-    enableStickyPane,
-    disableStickyPane,
-    contentTopRef,
-    contentBottomRef,
-    stickyPaneHeight: height,
-  }
+  return memoizedResult
 }
 
 // TODO: there is currently an issue with dvh on Desktop Safari 15.6, 16.0. To