use ref for report callback

docs/advanced-features/measuring-performance.md

@@ -13,9 +13,9 @@ The rest of this documentation describes the built-in relayer Next.js Analytics
 
 ## Build Your Own
 
-There're 2 ways of defining web vitals metrics reporting handler.
+There're 2 ways to define your metrics handler.
 
-**First one**, you can create a [custom App](/docs/advanced-features/custom-app.md) component and define a `reportWebVitals` function as global web vitals metrics handler:
+One way is to create a [custom App](/docs/advanced-features/custom-app.md) component and define a `reportWebVitals` function:
 
 ```js
 // pages/_app.js
@@ -30,7 +30,7 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
-**Another way** is to use the React hook version of `reportWebVitals`, using `useWebVitalsReport` and passing a callback to receive web vital metrics:
+Alternatively you can use the `useWebVitalsReport` hook API, with a callback function to receive metric reports:
 
 ```js
 // pages/home.js

packages/next/vitals/vitals.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { NextWebVitalsMetric } from '../pages/_app'
 
 type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
@@ -11,14 +11,15 @@ export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
 }
 
 export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
+  const callbackRef = useRef(callback)
   useEffect(() => {
     if (metrics.length) {
-      metrics.forEach((metric) => callback(metric))
+      metrics.forEach((metric) => callbackRef.current(metric))
     }
 
-    webVitalsCallbacks.add(callback)
+    webVitalsCallbacks.add(callbackRef.current)
     return () => {
-      webVitalsCallbacks.delete(callback)
+      webVitalsCallbacks.delete(callbackRef.current)
     }
-  }, [callback])
+  }, [])
 }