Gatsby always unmounts the page component on route change, regardless of the rendered component(s)

[jonsadka]

Description

Routes sharing the same component will fully unmount and remount on transition (NOTE: This is not the same as sharing the same Layout)

Steps to reproduce

• Create a Gatsby app
• In gatsby-node, create two pages using the same component

createPage({
    path: "foo",
    component: require.resolve("./src/components/foobar.js")
})

createPage({
    path: "bar",
    component: require.resolve("./src/components/foobar.js")
})

• Navigating from /foo to /bar or /bar to /foo will cause the page component to unmount and remount even though the exact same content is being rendered

Reproduction case: https://codesandbox.io/s/vibrant-morse-vkdkb?file=/src/components/foobar.js

Expected result

The page component should not unmount and remount since they are exactly the same

Actual result

The page component is unmounted and remounted even though the component is exactly the same

Environment

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 10.23.0 - /tmp/yarn--1613950868448-0.3994605907355353/node
    Yarn: 1.22.10 - /tmp/yarn--1613950868448-0.3994605907355353/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^2.32.3 => 2.32.3
    gatsby-image: ^2.11.0 => 2.11.0
    gatsby-plugin-manifest: ^2.12.0 => 2.12.0
    gatsby-plugin-offline: ^3.10.0 => 3.10.0
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1
    gatsby-source-filesystem: ^2.11.0 => 2.11.0
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0

Related tickets / issues

• Impossible to have nested routes and layouts that do not unmount? #23395

[jonsadka]

Following up, I was able to reproduced the expected behavior using client-only paths. Notice how on route change, the parent component does not get unmounted since the content does not change

Kapture.2021-02-21.at.17.48.44.mp4

// src/pages/[...].js

import {Link} from 'gatsby';
import React from 'react';
import {Location, Router} from '@reach/router';

export default class App extends React.Component {
  componentWillUnmount() {
    window.alert('componentWillUnmount App');
  }

  render() {
    return (
      <div>
        <Location>
          {({location}) => (
            <Router location={location}>
              <Parent default path="parent">
                <Foo path="foo" />
                <Bar path="bar" />
              </Parent>
            </Router>
          )}
        </Location>
      </div>
    );
  }
}

class Parent extends React.Component {
  componentWillUnmount() {
    window.alert('componentWillUnmount Parent');
  }

  render() {
    return (
      <div>
        <div style={{display: 'flex'}}>
          <div style={{marginRight: '8px'}}>CURRENT: parent</div>
          {this.props.children}
        </div>

        <div>
          go to <Link to="/parent">/parent</Link>
        </div>
        <div>
          go to <Link to="/parent/foo">/parent/foo</Link>
        </div>
        <div>
          go to <Link to="/parent/bar">/parent/bar</Link>
        </div>
      </div>
    );
  }
}

class Foo extends React.Component {
  componentWillUnmount() {
    window.alert('componentWillUnmount foo');
  }
  render() {
    return <div> foo</div>;
  }
}

class Bar extends React.Component {
  componentWillUnmount() {
    window.alert('componentWillUnmount bar');
  }
  render() {
    return <div> bar</div>;
  }
}

[LekoArts]

Hi!

As laid out in the linked issue and the original one (#6127) this is currently working as expected. Please open a feature request for this: https://github.com/gatsbyjs/gatsby/discussions/categories/ideas-feature-requests

Thanks!