Correct location to call webVitals in a React SPA about web-vitals

[philipwalton]

@hindsc52

Is this the correct way to call these methods? The component this is in is called in the main layout container that is used to wrap each page.

I'm not super familiar with React hooks, but yes, I believe useEffect() is the recommended way to prevent something from being executed on the server.

Another option would be to use dynamic import() to load the web-vitals library, which should also prevent that code from running when rendered on the server. Another advantage of using dynamic import() is it'll keep all the web-vitals code out of your app's main entry bundle.

@danoc

I'm also curious about this. Does it make sense to wrap the calls in a requestIdleCallback?

You do not need to use requestIdleCallback() with the web-vitals library. The underlying APIs themselves already do their best to dispatch the PerformanceObserver callbacks during idle periods, and in cases where that's not possible you need the callbacks to run right away (like if the page is unloading).

If you just use the callbacks as described in the docs, it shouldn't have any negative effects on performance.

[danoc]

I'm also curious about this. Does it make sense to wrap the calls in a requestIdleCallback?

https://developers.google.com/web/updates/2015/08/using-requestidlecallback#using_requestidlecallback_for_sending_analytics_data

[sallf]

I'm not super familiar with React hooks, but yes, I believe useEffect() is the recommended way to prevent something from being executed on the server.

This is an old post, but in case anyone else stumbles across it, I think it's worth noting that if you put these in a useEffect they should only be called ONCE on mount. See this discussion for more context:

#55 (comment)