Strange rendering bug

[LandonSchropp]

Description

This is kind of tricky, so bear with me. I've built a navigation component that changes its background based on the user's scroll position. This component looks like this:

export function MainNavigation({ className }) {
  const scrollY = useScrollPosition();

  let combinedClassName = classNames(
    "main-navigation",
    { "main-navigation--scrolled": scrollY !== 0 },
    className
  );

  return <nav className={ combinedClassName }>
    ...
  </nav>;
}

If I scroll the window and then refresh the page, the main-navigation--scrolled class is not present.

What's really strange about this is if log out combinedClassName, the class name is calculated by the component correctly on page load. If I scroll to the top of the screen and then scroll back down, the problem resolves itself.

Here's what I think may be happening:

1. Gatsby pre-renders the page on the server. This creates static HTML that's served up to the user.
2. When the user loads the page, the component's function runs again. This correctly loads scrollY, and correctly produces the main-navigation--scrolled class. However, Gatsby does not elect to re-render the component. I'm not sure why.

Steps to reproduce

1. Go to https://nobullshitgit.com/.
2. Scroll the page. (Notice how the main navigation's transparent background turns white.)
3. Refresh the page. (The main navigation's background will disappear.)

I've left in a console statement so you can see what's going on better. (console.log(scrollY, scrollY !== 0, combinedClassName);)

Expected result

Gatsby should update the DOM to include the main-navigation--scrolled class.

Actual result

Gatsby does not update the DOM to include the main-navigation--scrolled class.

Environment

  System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.198
    Firefox: 82.0.2
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.24.66 => 2.24.69
    gatsby-image: ^2.4.20 => 2.4.21
    gatsby-plugin-manifest: ^2.4.32 => 2.4.34
    gatsby-plugin-offline: ^3.2.29 => 3.2.31
    gatsby-plugin-react-helmet: ^3.3.12 => 3.3.13
    gatsby-plugin-sass: ^2.3.16 => 2.3.16
    gatsby-plugin-sharp: ^2.6.37 => 2.6.39
    gatsby-source-filesystem: ^2.3.31 => 2.3.33
    gatsby-transformer-sharp: ^2.5.16 => 2.5.17

[LekoArts]

Gatsby should update the DOM to include the main-navigation--scrolled class.

Why would you expect this? You're only setting the class name when scrolling, when Gatsby creates the HTML it doesn't scroll anything. You can either have the class name on the element in the HTML or not, but not both things. A former colleague wrote a great article about this: https://joshwcomeau.com/react/the-perils-of-rehydration/

So similar to libraries like react-headroom you need to handle the case of reloading the page when not at the top of the page yourself and add the logic to change the navigation then.

[LandonSchropp]

Thanks for sharing this article! You were right—I didn't quite understand how rehydration worked. This was the line from the article that really clarified it for me:

In a rehydration, React assumes that the DOM won't change. It's just trying to adopt the existing DOM.

In particular, I didn't understand how React reconciled the results of calling the component functions with the pre-rendered HTML. Using the fix in the article did the trick for me.

Thanks for the help!