perf(hooks): Add opt-in throttling to useResizeObserver and useOverflow

[mattcosta7]

Summary

Performance optimizations for useResizeObserver and useOverflow hooks to improve INP, with opt-in throttling for backwards compatibility.

Changes

1. useResizeObserver - Added optional throttle parameter (4th argument, defaults to false)
   • When throttle=false (default): behaves exactly as before - no throttling, immediate callbacks
   • When throttle=true: fires callback immediately on first observation, then throttles subsequent callbacks with rAF
2. useOverflow - Now uses useResizeObserver with throttle=true for internal optimization
3. Backwards compatible - Existing consumers get unchanged behavior by default

API

useResizeObserver(
  callback,
  target?,
  depsArray?,
  throttle?  // new - defaults to false for backwards compatibility
)

Expected INP Impact (when throttle=true)

Scenario	Before	After	Improvement
Worst case (rapid window resizing, many observers)	~50-100ms cumulative per resize	<16ms (1 frame)	70-85% reduction
Average case (occasional resize, few observers)	~20-40ms per resize	<16ms	40-60% reduction
Best case (single resize event)	~10-20ms	<16ms	~20% reduction

Why opt-in?

• Backwards compatibility - Existing consumers get the same behavior they had before
• Explicit intent - Consumers who want performance gains can opt-in consciously
• Use-case flexibility - Some consumers may need every resize event (analytics, animations, cumulative calculations)

Why this matters

ResizeObserver can fire many times per frame during animations or rapid resizing:

• Each callback may trigger state updates → re-renders
• Without throttling, this causes jank and dropped frames
• rAF batching ensures maximum 1 update per frame (60fps = 16ms budget)

The "first-immediate" pattern ensures initial render gets correct size without delay.

---

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 64a0de0

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.

[mattcosta7]

I believe this is a current bug, since things can never go to not overflow states

[Copilot]

Pull request overview

This PR adds performance optimizations to useResizeObserver and useOverflow hooks by implementing a "first-immediate" throttling pattern. The changes aim to reduce INP (Interaction to Next Paint) scores by batching ResizeObserver callbacks using requestAnimationFrame while ensuring the initial callback fires immediately to prevent UI flash.

Key changes:

• Immediate execution on first ResizeObserver callback, then rAF throttling for subsequent callbacks
• Proper cleanup of pending animation frames on component unmount
• Behavioral fix in useOverflow where overflow state now correctly resets to false

Reviewed changes

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

File	Description
packages/react/src/hooks/useResizeObserver.ts	Added first-immediate throttling pattern with rAF batching to reduce layout thrashing during rapid resize events
packages/react/src/hooks/useOverflow.ts	Applied same throttling pattern and fixed logic to properly reset hasOverflow to false when overflow is removed
.changeset/perf-use-resize-observer.md	Documents the performance improvements as a patch-level change

[francinelucca]

LGTM! some non-blocking comments

[primer-integration]

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

[primer-integration]

🔬 github-ui Integration Test Results

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

✨ All checks passed! Your integration PR is ready for review.