<Fade> in material-ui just disables the visibility of the component . How to get the fade effect and actually hide the component ?

Hiding element completely will introduce complexity since now you have to also unhide the element when Fade begins. That may interfere with fade effect.

With that said, you have few options:

• Use CSS attribute selectors to apply styles:

  div[opacity=0] {
    display: none;
  }
  
  div[opacity=1] {
    display: block;
  }
  

• Use react-transition directly (since that is what Fade uses): https://reactcommunity.org/react-transition-group/transition

  import Transition from 'react-transition-group/Transition';
  
  const duration = 300;
  
  const defaultStyle = {
      transition: `opacity ${duration}ms ease-in-out`,
      opacity: 0,
  }
  
  const transitionStyles = {
      entering: { opacity: 0, display: 'none' },
      entered:  { opacity: 1 , display: 'block'},
      exited:  { opacity: 0, display: 'none'},
  };
  
  const Fade = ({ in: inProp }) => (
      <Transition in={inProp} timeout={duration}>
          {(state) => (
          <div style={{
              ...defaultStyle,
              ...transitionStyles[state]
          }}>
              I'm a fade Transition!
          </div>
          )}
      </Transition>
  );
  

• Use Fade and pass handlers to Transition, like onExited and set desired states in there. Fade will simply pass extra props to root Transition element so this may work. The only caveat is that you'd be triggering a setState or similar post render phase which can get tricky.

<Fade in={!randomizeFlag} unmountOnExit={true}>
  ...
</Fade>

http://reactcommunity.org/react-transition-group/transition#Transition-prop-unmountOnExit

By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.