@primer/react 38.21.0 → 38.21.1-rc.8e466980b

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.21.1
+
+### Patch Changes
+
+- [#7770](https://github.com/primer/react/pull/7770) [`619175c`](https://github.com/primer/react/commit/619175c00dece144573fe5afbe4cd51e524a6c3d) Thanks [@LisaKr](https://github.com/LisaKr)! - Defer `useAnchoredPosition` initial mount setState from useLayoutEffect to useEffect when overlay is closed, eliminating unnecessary cascading re-renders that block paint.
+
 ## 38.21.0
 
 ### Minor Changes

package/dist/hooks/useAnchoredPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA4GA"}
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA8HA"}

package/dist/hooks/useAnchoredPosition.js

@@ -92,7 +92,25 @@ function useAnchoredPosition(settings, dependencies = []) {
   useIsomorphicLayoutEffect(() => {
     savedOnPositionChange.current = settings === null || settings === void 0 ? void 0 : settings.onPositionChange;
   }, [settings === null || settings === void 0 ? void 0 : settings.onPositionChange]);
-  useIsomorphicLayoutEffect(updatePosition, [updatePosition]);
+
+  // Defer the first updatePosition to useEffect when the overlay is closed on
+  // mount, avoiding paint-blocking cascading setState. If the overlay is already
+  // open on mount, run synchronously in useLayoutEffect to prevent a flash.
+  // After mount (including Suspense reappear), only call updatePosition when
+  // both refs are attached — skipping closed overlays avoids unnecessary setState.
+  const hasMountedRef = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
+      hasMountedRef.current = true;
+      updatePosition();
+    }
+  }, [updatePosition, floatingElementRef, anchorElementRef]);
+  React.useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      updatePosition();
+    }
+  }, [updatePosition]);
   useResizeObserver(updatePosition); // watches for changes in window size
   useResizeObserver(updatePosition, floatingElementRef); // watches for changes in floating element size
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.21.0",
+  "version": "38.21.1-rc.8e466980b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",