onPreRouteUpdate is not called in correct order rerender and onRouteUpdate

Description

I have a onPreRouteUpdate and a onRouteUpdate in gatsby-browser, both log to the console. I also have a layout component that logs on render and wrapped via gatsby-browsers wrapPageElement.

On initial render, the logging order is: onPreRouteUpdate > layout > onRouteUpdate On subsequent navigations, the logging order is: layout > onPreRouteUpdate > onRouteUpdate

This seems confusing and wrong. If onPreRouteUpdate is supposed to be triggered before a route update, layout cannot possibly be rerendered before that. Ordering seems wrong here.

Steps to reproduce

https://codesandbox.io/s/morning-silence-19rkd?file=/gatsby-browser.js https://19rkd-8000.sse.codesandbox.io/

Expected result

Logging order should always be: onPreRouteUpdate > layout > onRouteUpdate This should be the order for both initial render and subsequent navigations.

Actual result

On initial render, the logging order is: onPreRouteUpdate > layout > onRouteUpdate On subsequent navigations, the logging order is: layout > onPreRouteUpdate > onRouteUpdate

Environment

System: OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa) CPU: (8) x64 Intel® Core™ i7-7700K CPU @ 4.20GHz Shell: 5.8 - /usr/bin/zsh Binaries: Node: 12.18.3 - /tmp/yarn–1598220669129-0.9999174876381276/node Yarn: 1.22.4 - /tmp/yarn–1598220669129-0.9999174876381276/yarn npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm Browsers: Chrome: 84.0.4147.125 npmPackages: gatsby: ^2.24.48-incbuild-collections.5 => 2.24.48-incbuild-collections.5+598335ebeb gatsby-image: ^2.4.5 => 2.4.5 gatsby-plugin-linaria: ^2.0.0 => 2.0.0 gatsby-plugin-manifest: ^2.4.9 => 2.4.9 gatsby-plugin-mdx: ^1.2.15 => 1.2.15 gatsby-plugin-offline: ^3.2.7 => 3.2.7 gatsby-plugin-react-helmet: ^3.3.2 => 3.3.2 gatsby-plugin-remove-generator: ^1.0.5 => 1.0.5 gatsby-plugin-sharp: ^2.6.9 => 2.6.9 gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12 gatsby-remark-shiki-twoslash: ^0.6.1 => 0.6.1 gatsby-source-filesystem: ^2.3.8 => 2.3.8 gatsby-transformer-sharp: ^2.5.3 => 2.5.3

[WillMayger]

@clovis1122 Ah I see! - thanks for letting me take a look 😄 & I have a PR ready for review at https://github.com/gatsbyjs/gatsby/pull/27261

[clovis1122]

@WillMayger sure thing! I’m still exploring the repo. I don’t mind if your fix is merged instead of mine – will be mostly a learning experience for me, haha.