From 0e711e8c442871622e8fae5e16e2d07a1acb287c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 11 Sep 2021 01:06:13 +0800
Subject: [PATCH] flush when ready

---
 packages/next/client/index.tsx |  4 ++--
 packages/next/vitals/vitals.ts | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 694acd0cf30df4..4cd02c7344854d 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -32,7 +32,7 @@ import PageLoader, { StyleSheetTuple } from './page-loader'
 import measureWebVitals from './performance-relayer'
 import { RouteAnnouncer } from './route-announcer'
 import { createRouter, makePublicRouterInstance } from './router'
-import { webVitalsCallbacks } from '../vitals/vitals'
+import { flushWebVitalsCallbacks } from '../vitals/vitals'
 
 /// <reference types="react-dom/experimental" />
 
@@ -310,7 +310,7 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
             : 'web-vital',
       }
       exportedReportWebVitals?.(webVitals)
-      webVitalsCallbacks.forEach((callback) => callback(webVitals))
+      flushWebVitalsCallbacks(webVitals)
     }
 
     const pageEntrypoint =
diff --git a/packages/next/vitals/vitals.ts b/packages/next/vitals/vitals.ts
index 79cbca55eb8d2e..882b0fee865c95 100644
--- a/packages/next/vitals/vitals.ts
+++ b/packages/next/vitals/vitals.ts
@@ -1,17 +1,23 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { NextWebVitalsMetric } from '../pages/_app'
 
 type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
 export const webVitalsCallbacks = new Set<ReportWebVitalsCallback>()
-const isClient = typeof window !== 'undefined'
+let metric: NextWebVitalsMetric
 
-export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
-  // call on initial render, in a very early phase
-  useState(() => {
-    if (isClient) webVitalsCallbacks.add(callback)
-  })
+export function flushWebVitalsCallbacks(_metric: NextWebVitalsMetric) {
+  metric = _metric
+  webVitalsCallbacks.forEach((callback) => callback(metric))
+}
 
+export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
   useEffect(() => {
+    if (metric) {
+      callback(metric)
+      return
+    }
+
+    webVitalsCallbacks.add(callback)
     return () => {
       webVitalsCallbacks.delete(callback)
     }