GatsbyGram PageRenderer is glitchy

[bozdoz]

Description

https://gatsbygram.gatsbyjs.org/ loads beautifully, but cloning this repo and running it locally produces glitchy loading/rerendering of components/images.

Steps to reproduce

With a fresh repo, navigate to gatsbygram, and run with npm start. Visit the page on the browser and click an image to open a modal component. The PageRenderer component behind will re-render every time an image is clicked.

Expected result

The locally run project should run the same as the production version.

Actual result

The locally run project re-renders components:

Environment

System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 72.0.3626.109
Firefox: 65.0.1
Safari: 12.0.3
npmPackages:
gatsby: ^2.0.0 => 2.0.97
gatsby-image: ^2.0.5 => 2.0.27
gatsby-plugin-glamor: ^2.0.5 => 2.0.7
gatsby-plugin-google-analytics: ^2.0.5 => 2.0.10
gatsby-plugin-manifest: ^2.0.2 => 2.0.13
gatsby-plugin-offline: ^2.0.5 => 2.0.21
gatsby-plugin-sharp: ^2.0.5 => 2.0.18
gatsby-plugin-typography: ^2.2.0 => 2.2.5
gatsby-source-filesystem: ^2.0.1 => 2.0.17
gatsby-transformer-json: ^2.1.1 => 2.1.7
gatsby-transformer-sharp: ^2.1.1 => 2.1.12
npmGlobalPackages:
gatsby-cli: 2.4.8

[DSchau]

Oh interesting, thanks for alerting us of this issue!

Would you be interested in trying your hand at a fix?

[bozdoz]

Yes, of course.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[bozdoz]

Here was the implementation of src/layouts/index.js in v1 (not using PageRenderer component):

          <div>
            {isModal
              ? this.props.children({
                  ...this.props,
                  location: { pathname: `/` },
                })
              : this.props.children()}
          </div>

          <div>
            {isModal &&
              <Modal isOpen={true} posts={this.posts} location={location}>
                {this.props.children}
              </Modal>}
          </div>

I'm unfamiliar with how gatsby worked in v1. Looks as though the DefaultLayout component accepts a function as children, and then passes props and location. This is obviously why it doesn't glitch in v1: the children function renders the exact same tree and does not re-render.

Here's how it works in v2 (with PageRenderer):

    if (isModal && Modal) {
      return (
        <React.Fragment>
          <PageRenderer location={{ pathname: `/` }} />
          <Modal isOpen={true} location={location}>
            {this.props.children}
          </Modal>
        </React.Fragment>
      )
    }

It returns an entirely different tree. I don't see anyway to make this not re-render. Is there a simple gatsby function I could use to render the children similar to v1, so that I can use the same logic from v1?

[bozdoz]

Hmmm. Looks like this sums it up quite nicely: #940 (comment)

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[bozdoz]

Please define "30 days since anything happened", @gatsbot

[lannonbr]

Gatsbot closes issues after a period of time if no progress happens. @bozdoz if this issue is still relevant, I can open the issue back up and mark it as not stale

[bozdoz]

I have a hard time believing it isn't relevant, I posted the issue in detail, and referenced where it broke, all within the last 30 days. I'm just confused about this process at this point. I identified an issue, you can do with that what you want.

[KyleAMathews]

@bozdoz sorry about that! Re-opened it. We're working on a lot of different fronts — have you been able to find a fix for this?

[bozdoz]

@KyleAMathews I understand! I was not able to find a fix for it, as it seems quite involved. I noted above that you discovered this same issue awhile ago: #940 (comment)

It seems as though your fix for it then has been replaced (props.children as a function). As you said then, "this was the only option basically", so I hesitate to delve further, being rather a newbie at Gatsby myself. If you or anyone could help shed more light on this, or some advice as to where to look to solve this issue, I could take another look. I could be mistaken, but it seems like the PageRenderer component here is simply not able to provide the same functionality as props.children can as a function.

[bozdoz]

I wonder though if this gatsbygram example could just use the old behaviour with
gatsby-plugin-layout. Swap out the page renderer and use the previous implementation. Thoughts?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜