Reload applies adds CSS Classes to a div that shouldn't have it

[austincollinpena]

Bug Report

Current Behavior When I load my page it applies the incorrect classes to a div, even though the pre-generated HTML files and first view get it right.

Code Sandbox

Live Demo Link

If you take a look at the top of the DOM Tree, you'll see that the <main></main> has no classNames.

Refresh the page and the class from the home page is added "home-page-grid" which breaks the layout. Navigating to the home page, and then back to the blog page shows that the issue persists.

We see in the build folder that the

tag does not have the classname, but it gets added somehow.

Other notes:

• This only occurs when running the production build

[hsab]

Having very similar issues to this with style modules applied to incorrect elements on refresh.

[austincollinpena]

@hsab Probably best to use a different library

[iaguilarfer]

Run into a similar issue and couldn't find an answer here thinking it was related to react-snap. It actually was an issue with how I was using React.hydrate. In case anyone else is having problems with this, this article is a good read and provides a good solution https://www.joshwcomeau.com/react/the-perils-of-rehydration/

Long story short, adding

const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }

in your component should help.