perf(hooks): Optimize useAnchoredPosition to avoid duplicate observers and throttle updates

[mattcosta7]

Summary

Performance optimizations for useAnchoredPosition hook to improve INP.

Changes

1. Window resize listener - Use window resize instead of ResizeObserver on documentElement
2. Throttled ResizeObserver - Add ResizeObserver for floating element with first-immediate throttling pattern
3. updatePositionRef - Avoid callback identity changes that cause unnecessary effect re-runs
4. Deduplicate observers - Avoid redundant observer setup

Expected INP Impact

Scenario	Before	After	Improvement
Worst case (multiple overlays, rapid resize)	~80-150ms cumulative	<20ms	75-87% reduction
Average case (single overlay, occasional resize)	~30-50ms per resize	<10ms	67-80% reduction
Best case (static positioning)	~10-20ms initial	<5ms	50-75% reduction

Why this matters

useAnchoredPosition is used by Tooltip, ActionMenu, SelectPanel, Autocomplete, and other overlay components. Problems with the previous implementation:

1. ResizeObserver on documentElement - Fired on ANY document size change, extremely expensive
2. No throttling - Multiple position updates per frame during animations
3. Callback identity changes - Caused unnecessary effect re-runs

Window resize + targeted element observation + throttling = much better INP.

---

Part of the INP performance optimization effort. See #7312 for full context.

[changeset-bot]

🦋 Changeset detected

Latest commit: 747e815

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

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR optimizes the useAnchoredPosition hook to improve Interaction to Next Paint (INP) performance by reducing unnecessary observer overhead and throttling position updates. The changes replace expensive ResizeObserver usage on documentElement with a targeted window resize listener, implement first-immediate throttling for element resize observations, and use a ref pattern to prevent unnecessary effect re-runs.

Key changes:

• Replaced ResizeObserver on documentElement with window resize listener
• Implemented first-immediate throttling pattern for ResizeObserver callbacks using requestAnimationFrame
• Added updatePositionRef to stabilize callback identity and prevent unnecessary effect re-subscriptions

Reviewed changes

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

File	Description
packages/react/src/hooks/useAnchoredPosition.ts	Removed useResizeObserver hook dependency, added updatePositionRef for callback stabilization, implemented window resize listener and throttled ResizeObserver for floating/anchor elements
.changeset/perf-use-anchored-position.md	Added changeset documenting the performance optimization

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/8884

[primer-integration]

🔬 github-ui Integration Test Results

Check	Status	Details
CI	✅ Passed	View run
Projects (Memex)	❌ Failed	View run
VRT	✅ Passed	View run

❌ Troubleshooting Failed Checks

Projects (Memex)

This check runs Playwright end-to-end tests for the Projects feature. Check the test artifacts for screenshots and traces.

👉 View detailed logs

---

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

[mattcosta7]

superceeded by #7362