import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';

export function NoSsr(props) {
    const {children, defer = false, fallback = null} = props;
    const [mountedState, setMountedState] = React.useState(false);

    useEnhancedEffect(() => {
        if (!defer) {
            setMountedState(true);
        }
    }, [defer]);

    React.useEffect(() => {
        if (defer) {
            setMountedState(true);
        }
    }, [defer]);

    return (
        <>
            {mountedState ? children : fallback}
        </>
    )
}
