title: HOC's getting rendered every time
body: <pre><code>const withSnackbar = (WrappedComponent: React.FunctionComponent&lt;any&gt;): React.FunctionComponent&lt;any&gt; =&gt; {
    const LoadedWrappedComponent = (props: any): ReactElement&lt;any&gt; =&gt; {
      const classes = useStyles();
      const theme = useTheme();
      const [open, setOpen] = useState(false);
      const [messageData, setMessageData] = useState&lt;IMessageData&gt;({
        message: '',
        severityType: 'info',
        duration: 2000,
        vertical: 'bottom',
        horizontal: 'right',
      });
      const showMessage = ({
        message,
        severityType,
        vertical = 'bottom',
        horizontal = 'right',
        duration = 2000,
      }: IMessageData): void =&gt; {
        setMessageData({
          message,
          severityType,
          duration: horizontal === 'left' ? 5000 : duration,
          vertical,
          horizontal: theme.direction === 'ltr' ? 'right' : 'left',
        });
        setOpen(true);
      };
  
      const handleClose = (): void =&gt; {
        setOpen(false);
      };
      const { message, severityType, duration, horizontal, vertical } = messageData;
      return (
        &lt;&gt;
          &lt;WrappedComponent {...props} showToastMessage={showMessage} /&gt;
          &lt;Snackbar
            anchorOrigin={{
              vertical,
              horizontal,
            }}
            autoHideDuration={duration}
            open={open}
            onClose={handleClose}
            TransitionComponent={Slide}
          &gt;
            &lt;Alert
              classes={{
                root: classes.root,
              }}
              variant='filled'
              severity={severityType}
              action={
                horizontal === 'right' ? (
                  &lt;IconButton&gt;
                    &lt;Icon src='CloseOutlined' onClick={handleClose} /&gt;
                  &lt;/IconButton&gt;
                ) : (
                  &lt;&gt;&lt;/&gt;
                )
              }
            &gt;
              {message}
            &lt;/Alert&gt;
          &lt;/Snackbar&gt;
        &lt;/&gt;
      );
    };
    return LoadedWrappedComponent;
  };
  
  export default withSnackbar;
  </code></pre>
  <p>**When I am closing toast message but page getting rerendered where my page components also rendering from json template with help of HOC too.. and also after api calls when I dispatch some success message or any reducer .. also my entire template page rerenders</p>
  <ol>
  <li>Tried memo no luck.</li>
  <li>Tried Render Props no luck**</li>
  </ol>