diff --git a/.changeset/perf-actionbar-observer.md b/.changeset/perf-actionbar-observer.md new file mode 100644 index 00000000000..d08feddbd2e --- /dev/null +++ b/.changeset/perf-actionbar-observer.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +perf(ActionBar): Add comment noting ResizeObserver throttling for INP + +Document that useResizeObserver is throttled by default with rAF for better INP. diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 7f2745ef218..97d4f02b275 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -320,6 +320,7 @@ export const ActionBar: React.FC> = prop const moreMenuBtnRef = useRef(null) const containerRef = React.useRef(null) + // ResizeObserver is throttled by default (rAF) for better INP useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => { const navWidth = resizeObserverEntries[0].contentRect.width const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0