Improve PageLayout performance

[hectahertz]

Closes #4591

Changelog

Changed

Fixes the extra re-renders caused by the useStickyPaneHeight hook on PageLayout and its contents.

The cause of the re-renders was re-creation of objects and functions on every hook call, which cause the context consumers to re-render.

Further improvements could (and should) be made by:

• Removing all the Styled Components code
• Switching to a CSS solution for the sticky header

Before:

Screen.Recording.2025-04-20.at.16.03.25.mov

After:

Screen.Recording.2025-04-20.at.16.01.59.mov

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: fd2ae7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull Request Overview

Improve PageLayout performance by reducing unnecessary re-renders caused by the re-creation of objects and functions.

• Wrapped enableStickyPane and disableStickyPane in React.useCallback in useStickyPaneHeight for consistent references.
• Introduced memoization of the context value in PageLayout to prevent needless re-renders of consumers.
• Added a changeset for a patch release.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/react/src/PageLayout/useStickyPaneHeight.ts	Introduces useCallback wrappers and memoizes the hook's returned object.
packages/react/src/PageLayout/PageLayout.tsx	Uses React.useMemo for the context value to reduce re-rendering overhead.
.changeset/clean-fried-eggs.md	Provides a changeset for the patch release focused on performance improvements.

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	102.35 KB (+0.07% 🔺)
packages/react/dist/browser.umd.js	102.59 KB (+0.06% 🔺)

[github-actions]

Uh oh! @hectahertz, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 24
• Images should have meaningful alternative text (alt text) at line 35

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.