Side effect in MUI Modal

Question

I use React 17.0.1 and Material-UI 4.11.2 in my project. When I try to make a side effect for modal in the useEffect hook it executes before a modal rendering.

import React, { useEffect } from "react";
import { Modal } from '@material-ui/core';

const MyModal = ({ sideFunction, isModalVisible, closeModal }) => {
    useEffect(() => {
        sideFunction();
    }, []);
    
    return (
        <Modal open={isModalVisible} onClose={closeModal}>
            <div>MODAL</div>
        </Modal>
    );
}

Answer 1

Try to render your model conditionaly where you have used this model. instead of:

<MyModal ...props />

Use Like this:

{isModalVisible && <MyModal ...props />}