[test] Update hydration marker for React 17 (#16756)

Author: Timer

packages/next/client/index.tsx

@@ -151,14 +151,6 @@ class Container extends React.Component<{
         }
       )
     }
-
-    if (process.env.__NEXT_TEST_MODE) {
-      window.__NEXT_HYDRATED = true
-
-      if (window.__NEXT_HYDRATED_CB) {
-        window.__NEXT_HYDRATED_CB()
-      }
-    }
   }
 
   componentDidUpdate() {
@@ -719,5 +711,15 @@ function Root({
   // We use `useLayoutEffect` to guarantee the callback is executed
   // as soon as React flushes the update.
   React.useLayoutEffect(() => callback(), [callback])
+  if (process.env.__NEXT_TEST_MODE) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      window.__NEXT_HYDRATED = true
+
+      if (window.__NEXT_HYDRATED_CB) {
+        window.__NEXT_HYDRATED_CB()
+      }
+    }, [])
+  }
   return children as React.ReactElement
 }

test/acceptance/helpers.js

@@ -37,10 +37,6 @@ export async function sandbox(
     env: { __NEXT_TEST_WITH_DEVTOOL: 1 },
   })
   const browser = await webdriver(appPort, '/')
-
-  // Slow down tests a bit to ensure application is ready:
-  await new Promise((resolve) => setTimeout(resolve, 750))
-
   return [
     {
       sandboxDirectory,