From d88fd14a280928d46e18a8186ed83a8d1f609289 Mon Sep 17 00:00:00 2001
From: Sanjaiyan Parthipan <parthipankalayini@gmail.com>
Date: Fri, 5 Aug 2022 15:12:55 +0530
Subject: [PATCH] =?UTF-8?q?Hoist=20styles=20for=20Route=20Announcer=20?=
 =?UTF-8?q?=F0=9F=93=A2=20(#39331)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hi,

- Remove inlined CSS style which have minor performance loss. And hoist it to top of the component.
> Each time you inline an object, React re-creates a new reference to this object on every render. This causes components that receive this object to treat it as a referentially different one which have some performance pitfalls.


_Extremely sorry if I made any mistakes :(_
---
 packages/next/client/route-announcer.tsx | 32 +++++++++++++-----------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/next/client/route-announcer.tsx b/packages/next/client/route-announcer.tsx
index 022342e0b300..3b59fd84d96b 100644
--- a/packages/next/client/route-announcer.tsx
+++ b/packages/next/client/route-announcer.tsx
@@ -1,7 +1,22 @@
 import React from 'react'
 import { useRouter } from './router'
 
-export function RouteAnnouncer() {
+const nextjsRouteAnnouncerStyles: React.CSSProperties = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  width: '1px',
+
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  whiteSpace: 'nowrap',
+  wordWrap: 'normal',
+}
+
+export const RouteAnnouncer = () => {
   const { asPath } = useRouter()
   const [routeAnnouncement, setRouteAnnouncement] = React.useState('')
 
@@ -39,20 +54,7 @@ export function RouteAnnouncer() {
       aria-live="assertive" // Make the announcement immediately.
       id="__next-route-announcer__"
       role="alert"
-      style={{
-        border: 0,
-        clip: 'rect(0 0 0 0)',
-        height: '1px',
-        margin: '-1px',
-        overflow: 'hidden',
-        padding: 0,
-        position: 'absolute',
-        width: '1px',
-
-        // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-        whiteSpace: 'nowrap',
-        wordWrap: 'normal',
-      }}
+      style={nextjsRouteAnnouncerStyles}
     >
       {routeAnnouncement}
     </p>