anchor link navigation in mdx pages should not result in a rerender

Description

When i click on an anchor link in a MDX page, the initial page animation that is based on framer-motion’s AnimatePresence kicks in - which it shouldn’t. This happens because the location.hash change results in a rerender, all the way up from Root, LocationHandler, RouteHandler, via wrapPageElement to my Layout component. This is not supposed to happen on an anchor change - because if it does, i have no way to decide between an actual URL change or an anchor change.

Interestingly enough, this works the way it’s supposed to be on “normal” JavaScript pages.

Steps to reproduce

https://codesandbox.io/s/gatsby-mdx-anchor-link-rerender-6k3pj is the sandbox that reproduces this. Because codesandbox itself has bugs with anchor links in the full view, you need to open the app itself in a new tab.

1. open https://6k3pj-8000.sse.codesandbox.io/
2. click on anchor links next to sub-headings, see page jump to #id - try back and forward browser button. Everything seems good
3. scroll down, click on “Go to MDX page” or go to https://6k3pj-8000.sse.codesandbox.io/page-2/ directly
4. click on anchor links next to sub-headings, see page jump to #id and replay the staggering intro animation on each jump - try back and forward browser button. This is not what we want.

Expected result

MDX anchor links should behave like those in “normal” js pages.

Actual result

Everything is rerendered on clicking an anchor link, which re-triggers the initial mounting animation for the page.

Environment

Environment info from codesandbox reproduction:

System: OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster) CPU: (16) x64 Intel® Core™ i9-9900K CPU @ 3.60GHz Shell: 5.0.3 - /bin/bash Binaries: Node: 10.21.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python npmPackages: gatsby: 2.24.47 => 2.24.47 gatsby-image: ^2.4.16 => 2.4.16 gatsby-plugin-manifest: ^2.4.23 => 2.4.23 gatsby-plugin-mdx: 1.2.34 => 1.2.34 gatsby-plugin-offline: ^3.2.23 => 3.2.23 gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 gatsby-plugin-sharp: ^2.6.27 => 2.6.27 gatsby-source-filesystem: ^2.3.24 => 2.3.24 gatsby-transformer-sharp: ^2.5.13 => 2.5.13

[MarkosKon]

The createComponents function returns a new object on every render so the custom MDX components probably re-mount every time. Try removing the function and declare a components object directly.

[codepunkt]

@MarkosKon seems i had a caching issue there. you are correct, thanks a lot! @blainekasten issue is resolved, keep closed