From ab68b47e8c70f2e375889e340250c6c79ef0fb48 Mon Sep 17 00:00:00 2001
From: Gerald Monaco <gbmonaco@google.com>
Date: Thu, 22 Apr 2021 16:38:40 +0000
Subject: [PATCH] Fix side effects in router-is-ready tests

---
 .../router-is-ready/pages/auto-export/[slug].js      | 12 ++++++++----
 .../router-is-ready/pages/auto-export/index.js       | 12 ++++++++----
 test/integration/router-is-ready/pages/gip.js        | 12 ++++++++----
 test/integration/router-is-ready/pages/gsp.js        | 12 ++++++++----
 test/integration/router-is-ready/pages/gssp.js       | 12 ++++++++----
 5 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/test/integration/router-is-ready/pages/auto-export/[slug].js b/test/integration/router-is-ready/pages/auto-export/[slug].js
index f325029ae5880..d0a8a538bbf7a 100644
--- a/test/integration/router-is-ready/pages/auto-export/[slug].js
+++ b/test/integration/router-is-ready/pages/auto-export/[slug].js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (
diff --git a/test/integration/router-is-ready/pages/auto-export/index.js b/test/integration/router-is-ready/pages/auto-export/index.js
index f325029ae5880..d0a8a538bbf7a 100644
--- a/test/integration/router-is-ready/pages/auto-export/index.js
+++ b/test/integration/router-is-ready/pages/auto-export/index.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (
diff --git a/test/integration/router-is-ready/pages/gip.js b/test/integration/router-is-ready/pages/gip.js
index 861fb516946b9..4952023a75be8 100644
--- a/test/integration/router-is-ready/pages/gip.js
+++ b/test/integration/router-is-ready/pages/gip.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (
diff --git a/test/integration/router-is-ready/pages/gsp.js b/test/integration/router-is-ready/pages/gsp.js
index b2bf1b290ab01..f9c637c9fecd6 100644
--- a/test/integration/router-is-ready/pages/gsp.js
+++ b/test/integration/router-is-ready/pages/gsp.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (
diff --git a/test/integration/router-is-ready/pages/gssp.js b/test/integration/router-is-ready/pages/gssp.js
index 8a103d094a2df..10e8627181018 100644
--- a/test/integration/router-is-ready/pages/gssp.js
+++ b/test/integration/router-is-ready/pages/gssp.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (