[SSR] Rehydrating app contains the wrong classnames.

I use the match render prop callback to set a prop which itself toggles a className. This renders fine on the server but on first load the client does not re-render to correctly display the className. I have even tried to for a state update using setState in an onChange callback provided to react-responsive. For some reason the matches values is correct when I examine the react tree but the DOM node is missing the correct class name. If I force the breakpoint by shrinking the window and expanding it again everything works correctly. I need that first render to be correct. The react-responsive-redux solution is not good for this use case as it tries to guess the viewport based on the user agent. I don’t need that, I just need the responsive component to re-render in the client. Is there something I am missing to accomplish this? Here is the component I’m trying to get to work:

import React from 'react';
import Responsive from 'react-responsive';
import BorderedRow from '../../../components/BorderedRow';
import styles from './index.scss';

const Posts = ({ posts, className }) => (
  <Responsive minWidth={981}>
    {match => (
      <div>
        {posts?.map?.(
          ({ id }) => (
            <BorderedRow stacked={match} key={id} className={styles.post}>
              <span>the rest of the content</span>
            </BorderedRow>
          )
        )}
      </div>
    )}
  </Responsive>
);

export default Posts;

[jnlsn]

the solution @nhuanhoangduc proposed works quite well. I modified it a bit to use hooks instead of hocs 🙂

import { useState, useLayoutEffect } from 'react';
import { useMediaQuery } from 'react-responsive';
import Theme from '../components/Theme';

const { breakpoint: breakpointMobile, breakpointTablet } = Theme;

function useResponsive() {
  const [isClient, setIsClient] = useState(false);

  const isMobile = useMediaQuery({
    maxWidth: breakpointMobile,
  });

  const isTablet = useMediaQuery({
    minWidth: breakpointMobile,
    maxWidth: breakpointTablet,
  });

  const isDesktop = useMediaQuery({
    minWidth: breakpointTablet,
  });

  useLayoutEffect(() => {
    if (typeof window !== 'undefined') setIsClient(true);
  }, []);

  return {
    isDesktop: isClient ? isDesktop : true,
    isTablet: isClient ? isTablet : false,
    isMobile: isClient ? isMobile : false,
  };
}

export default useResponsive;

[team-gguys]

@isotopeee I recommend using class component to understand deeply react lifecycle before moving to functional component and hook.