SSR and <Fade> : Prop `style` did not match

Hello,

I want to surround a component with <Fade> only when on client side. So here is what my code look like :

import React from 'react';
import {Fade} from '@material-ui/core';

const isServer = function() {
    return !(
        typeof window !== 'undefined' &&
        window.document &&
        window.document.createElement
    );
};

class MyComponent extends React.Component {
    render() {
        const content = (
            <div>Hello</div>
        );

        if (isServer()) {
            return content;
        }

        return (
            <Fade in={true} timeout={2500} mountOnEnter unmountOnExit>
                {content}
            </Fade>
        );
    }
}

export default MyComponent;

This code generate the following warning on the client-side console :

Warning: Prop style did not match. Server: “null” Client: “opacity:0;will-change:opacity”

How can I avoid this ?

Thank you

[oliviertassinari]

@remigarcia It’s a React issue, you can’t do that. I can share with you two helpers:

NoSrr https://material-ui.com/utils/no-ssr/

SrrOnly.js the opposite of NoSrr

let reconciled = true

class SsrOnly extends React.Component {
  componentDidMount() {
    reconciled = false
  }

  render() {
    return reconciled ? this.props.children : true
  }
}

SsrOnly.propTypes = {
  children: PropTypes.node.isRequired,
}

If your issue is with the first animation, use <Fade appear={false}>.

[oliviertassinari]

@remigarcia From my understanding, react-transition-group can be configured for your SSR use case. Just have to dig into the right properties combination. The Fade do support it.