Conditional className is not properly updated in production

Thanks for all your work, react-static is awesome!

Describe the bug While trying to store some state in localStorage, I’ve identified an issue with a conditional className for a component. While the state of the component is correct, it doesn’t seem to update the className property as expected.

To Reproduce Steps to reproduce the behavior:

1. Clone https://github.com/JohnBerlin/hydrate-does-not-work-on-classname
2. Run npm i
3. Run npm run stage
4. Run npm run serve
5. Go to http://localhost:3000
6. Click on one of the toggles
7. Reload the page
8. The text of the toggle is correct (“isOn” or “isOFF”) but the style applied doesn’t match the “.isON” CSS class

Expected behavior The className property should be correctly updated once the page is loaded.

Screenshots

Desktop (please complete the following information):

• OS: KUbuntu 18.04
• Browser: Firefox & Chrome
• Version: Latest

Thanks for all your work, react-static is awesome!

Am I doing anything wrong with this?

[SleeplessByte]

Hi Ben,

Tanner is no longer around; you may write this up, but in reality, code like Kevin posted is problematic to begin with. If you really can’t use media queries, you should run that code in a useEffect, and hook on a “document on size change” handler. That will resolve the issue to begin with – regardless of hydration, SSR, or what’s not.

As for your hook: it doesn’t work “only” on hydrate. It will always double re-render on mount, (where hydration can be the first mount). It’s probably not the most optimal solution if you were to go that route.

[kevinmanncito]

Using a class based component + componentDidMount as a workaround isn’t working for me on the latest version (7.0.10)

Here are two simple example components that don’t work correctly. One is a functional component and one is a class based component. The content renders correctly but not the className.

export default class Home extends React.Component {
  state = {
    width: typeof window !== 'undefined' ? window.innerWidth : 1000
  }

  componentDidMount () {
    this.setState({
      width: window.innerWidth,
    })
  }

  render () {
    return (
      <div style={{ textAlign: 'center' }} className={`${this.state.width < 500 ? 'mobile' : 'desktop'}`}>
        {this.state.width < 500
          ? (
            <h1>Welcome to React-Static - Mobile</h1>
          )
          : (
            <h1>Welcome to React-Static - Desktop</h1>
          )
        }
      </div>
    )
  }
}

and

export default () => {
  const width = typeof window !== 'undefined' ? window.innerWidth : 1000

  return (
    <div style={{ textAlign: 'center' }} className={`${width < 500 ? 'mobile' : 'desktop'}`}>
      {width < 500
        ? (
          <h1>Welcome to React-Static - Mobile</h1>
        )
        : (
          <h1>Welcome to React-Static - Desktop</h1>
        )
      }
    </div>
  )
}