From 9bc4202e9738565badf58adfb5e788cf5223b61e Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Mon, 15 Dec 2025 14:58:56 +0000
Subject: [PATCH] perf(Announce): Batch getComputedStyle reads to avoid layout
 thrashing

Combine display and visibility checks into a single getComputedStyle call.

Part of #7312
---
 .changeset/perf-announce-batched-reads.md   | 7 +++++++
 packages/react/src/live-region/Announce.tsx | 9 +++------
 2 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/perf-announce-batched-reads.md

diff --git a/.changeset/perf-announce-batched-reads.md b/.changeset/perf-announce-batched-reads.md
new file mode 100644
index 00000000000..948a0b218ed
--- /dev/null
+++ b/.changeset/perf-announce-batched-reads.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+perf(Announce): Batch getComputedStyle reads to avoid layout thrashing
+
+Combine display and visibility checks into a single getComputedStyle call.
diff --git a/packages/react/src/live-region/Announce.tsx b/packages/react/src/live-region/Announce.tsx
index 6e439d10a9b..7d3a69fbe0f 100644
--- a/packages/react/src/live-region/Announce.tsx
+++ b/packages/react/src/live-region/Announce.tsx
@@ -64,12 +64,9 @@ export function Announce<As extends React.ElementType = 'div'>(props: AnnouncePr
       return
     }
 
-    const style = window.getComputedStyle(element)
-    if (style.display === 'none') {
-      return
-    }
-
-    if (style.visibility === 'hidden') {
+    // Check if element is visible - batch these layout reads together
+    const {display, visibility} = window.getComputedStyle(element)
+    if (display === 'none' || visibility === 'hidden') {
       return
     }