Add setTimeout before calling onRouteUpdate to ensure React has written to DOM before plugins run code

packages/gatsby-plugin-google-analytics/src/gatsby-browser.js

@@ -1,10 +1,7 @@
 exports.onRouteUpdate = function({ location }) {
  // Don't track while developing.
  if (process.env.NODE_ENV === `production` && typeof ga === `function`) {
- // Wait for the title update (see #2478)
- setTimeout(() => {
- window.ga(`set`, `page`, (location || {}).pathname)
- window.ga(`send`, `pageview`)
- }, 0)
+ window.ga(`set`, `page`, (location || {}).pathname)
+ window.ga(`send`, `pageview`)
  }
 }

packages/gatsby-plugin-twitter/src/gatsby-browser.js

@@ -1,12 +1,9 @@
 exports.onRouteUpdate = function({ location }) {
- // Wait to ensure page is rendered first.
- setTimeout(() => {
- if (
- typeof twttr !== `undefined` &&
- window.twttr.widgets &&
- typeof window.twttr.widgets.load === `function`
- ) {
- window.twttr.widgets.load()
- }
- }, 0)
+ if (
+ typeof twttr !== `undefined` &&
+ window.twttr.widgets &&
+ typeof window.twttr.widgets.load === `function`
+ ) {
+ window.twttr.widgets.load()
+ }
 }

packages/gatsby/cache-dir/production-app.js

@@ -110,7 +110,10 @@ apiRunnerAsync(`onClientEntry`).then(() => {
 
  history.listen((location, action) => {
  if (!maybeRedirect(location.pathname)) {
- apiRunner(`onRouteUpdate`, { location, action })
+ // Make sure React has had a chance to flush to DOM first.
+ setTimeout(() => {
+ apiRunner(`onRouteUpdate`, { location, action })
+ }, 0)
  }
  })
  }