title: material ui modal slow and even crash
body: <p>I'm using Reactjs to create a table, the thing I want to do is every time I click one of the rows in the table, a modal will pop up and ask me if I want to print this row. I have added a modal using material-UI dialog, but it performs really bad, it's responded slowly and after a few click it will freeze the app and eventually crash it.
  Could anyone suggest where the problem is? I tried to solve this for a day already, but still no progress.</p>
  <pre><code>
      import React from 'react';
      import {useState, setState} from 'react';
      import { makeStyles } from &quot;@material-ui/core/styles&quot;;
      import styles from &quot;assets/jss/material-dashboard-react/views/iconsStyle.js&quot;;
      import MaterialTable, {MTableHeader, MTableToolbar} from 'material-table';
      import Axios from 'axios';
      import date from 'date-and-time';
      import AlertDialog from 'components/Modal/popover';
      import { useConfirm, ConfirmProvider } from 'material-ui-confirm';
  
      /**
       * Date Calculation
       */
  
      const useStyles = makeStyles((theme)=&gt;({
          ...styles,
          typography: {
              padding: theme.spacing(2),
            },
            paper: {
              position: 'absolute',
              width: 400,
              backgroundColor: theme.palette.background.paper,
              border: '2px solid #000',
              boxShadow: theme.shadows[5],
              padding: theme.spacing(2, 4, 3),
            },
      }));
  
  
  
  
      //FUNCTION: Generates todays date and the requested picking terminal date in pacific time
          //OUTPUT: Todays date and the requested date for picking terminal   
      function ImportantDates(){
          var today = new Date(); 
          // var year = today.getFullYear();
          // var Month = today.getMonth()+ 1; //getMonth() can return 0, so +1 is needed.
          // var Day = today.getDate();
          const now = new Date();
          const day = date.format(now, 'YYYY-MM-DD');
  
          //Get todays date and convert UTC to Pacific
          //Determine the start date day of the week
          var weekday = new Array(7);
          weekday[0] = &quot;Sunday&quot;;
          weekday[1] = &quot;Monday&quot;;
          weekday[2] = &quot;Tuesday&quot;;
          weekday[3] = &quot;Wednesday&quot;;
          weekday[4] = &quot;Thursday&quot;;
          weekday[5] = &quot;Friday&quot;;
          weekday[6] = &quot;Saturday&quot;;
          var dayOfWeek = weekday[today.getDay()];
  
          //Monday through Wednesday
          var leapDay = 3;
              if(dayOfWeek === &quot;Wednesday&quot;){
                  leapDay = 5;
              }
              //Skip the weekends
              if(dayOfWeek === &quot;Sunday&quot;){
                  leapDay = 4;
              }
              if(dayOfWeek === &quot;Saturday&quot;){
                  leapDay = 4;
              }
              if((dayOfWeek === &quot;Thursday&quot;) || (dayOfWeek === &quot;Friday&quot;)){
                  leapDay = 5;
              }
          //How far ahead the picking terminal is looking
          var date_ = date.addDays(now, leapDay);
          date_ = date.format(date_, 'YYYY-MM-DD');
          var dates ={
          &quot;today&quot;: day,
          &quot;requested&quot;: date_,
          }
          return dates;
      }
  
  
      // query for picking terminal 
      function getQuery(){
          const date = ImportantDates();
          const requested = date['requested'];
          const query = 
          `SELECT  work_orders.WOID, work_orders.endDate, work_orders.printed,
          work_orders.quantity, 
          work_orders.expedite, 
          work_orders.buildable,
          work_orders.startDate,
          work_orders.orderStatus,
          work_orders.createdDate,
          work_orders.productionLine, 
          work_orders.estTotalRunTime,
          work_orders.productionNotes,
          work_orders.productionStatus, 
          
          sales_orders.SOID,
          sales_orders.shipDate, 
          
          parts.partName, 
          parts.partDescription,
          
          customers.CID,
          customers.customerName
          
          
          FROM work_orders 
          
          LEFT JOIN sales_orders 
          ON work_orders.internalId  = sales_orders.internalId 
          
          LEFT JOIN parts 
          ON work_orders.partId  = parts.partId 
          
          LEFT JOIN customers 
          ON sales_orders.CID  = customers.CID
          WHERE orderStatus = 'Released' AND productionStatus = 'Approved' AND startDate &lt;= '${requested}'
          ORDER BY expedite DESC, startDate ASC, shipDate IS NULL, shipDate ASC, createdDate ASC, SOID ASC`
  
          return query;
      }
  
  
      export default function PickingTerminal(props){
          const classes = useStyles();
          const [columns, setColumns] = useState([
              { title: 'Printed', field: 'printed'},
              { title: 'Start Date', field: 'startDate', },
              { title: 'Pordcution Line', field: 'productionLine', },
              { title: 'Work Order', field: 'WOID', type: 'numeric'},
              { title: 'Part Name', field: 'partName', },
              { title: 'Quantity', field: 'quantity', type: 'numeric'},
              { title: 'Customer', field: 'customerName', },
              {title: 'Ship Date', field: 'shipDate'},
              { title: 'Production Status', field: 'productionStatus', },
          ]);
          const [work_orders, setWO] = useState([]);
          const [open, setOpen] = React.useState(false);
       
          const getData =()=&gt;{
              var query = {
                      'query' : getQuery()
                  }
              var url =  'http://10.2.1.202:8000/api/pickingterminal?';
              Axios.post(url , query).then(result=&gt;{
                  console.log(result.data);
                  setWO(result.data);
              })
          }
          React.useEffect(()=&gt;{
              getData();
              console.log(work_orders);
          },[]);  
  
         const setColor=(rowData)=&gt;{
              if(rowData['buildable'] &lt; rowData['quantity']){
                  return '#E52B50';
              }
              else if(rowData['expedite'] &gt; 0){
                  return '#FF7E00';
              }
              else if(rowData['productionNotes'].includes('RMA')){
                  return 'green';
              }
              else if(rowData['productionNotes'].includes('NEW BUILD')){
                  return 'deeppink';
              }
              return '#FFF';
          }
          
          const printItem=(rowData)=&gt;{
              console.log(rowData);
          }
          
          const confirm = useConfirm();
          const handleShow = () =&gt; {
              setOpen(true);
              // console.log(&quot;handle show: &quot; + open);
          };
          
          const handleClose = () =&gt; {
              setOpen(false);
              console.log(&quot;handle show: &quot; + open);
          };
  
          return(
              &lt;div&gt;
                  &lt;MaterialTable
                  options={{
                      sorting: true,
                      filtering: false,
                      search: true,
                      exportButton: true,
                      pageSize: 100,
                      pageSizeOptions: [25, 50, 100, 150],
                      thirdSortClick: true,
                      initialPage: 0,
                      debounceInterval: 500,
                      paging: true,
                      rowStyle: rowData=&gt;({
                          backgroundColor: setColor(rowData)
                      })
                    }}
                  
                  onRowClick={(selectedRow) =&gt; handleShow()}
                  columns={columns}
                  data={work_orders}
                  title=&quot;Work Orders&quot;
                    /&gt;
                      &lt;AlertDialog 
                      open={open}
                      handleClose={handleClose} /&gt;
              &lt;/div&gt;
              
          );
  
  
      }
  
  </code></pre>
  <pre><code>
      import React from 'react';
      import Button from '@material-ui/core/Button';
      import Dialog from '@material-ui/core/Dialog';
      import DialogActions from '@material-ui/core/DialogActions';
      import DialogContent from '@material-ui/core/DialogContent';
      import DialogContentText from '@material-ui/core/DialogContentText';
      import DialogTitle from '@material-ui/core/DialogTitle';
  
      export default function AlertDialog(props) {
        const [open, setOpen] = React.useState(props.open);
        const handleClose = () =&gt; {
          console.log('in change');
          props.handleClose();
        };
  
        return (
          &lt;div&gt;
            &lt;Dialog
              open={props.open}
              onClose={props.handleClose}
              aria-labelledby=&quot;alert-dialog-title&quot;
              aria-describedby=&quot;alert-dialog-description&quot;
            &gt;
              &lt;DialogTitle id=&quot;alert-dialog-title&quot;&gt;{&quot;Use Google's location service?&quot;}&lt;/DialogTitle&gt;
              &lt;DialogContent&gt;
                &lt;DialogContentText id=&quot;alert-dialog-description&quot;&gt;
                  Let Google help apps determine location. This means sending anonymous location data to
                  Google, even when no apps are running.
                &lt;/DialogContentText&gt;
              &lt;/DialogContent&gt;
              &lt;DialogActions&gt;
                &lt;Button onClick={props.handleClose} color=&quot;primary&quot;&gt;
                  Disagree
                &lt;/Button&gt;
                &lt;Button onClick={props.handleClose} color=&quot;primary&quot; autoFocus&gt;
                  Agree
                &lt;/Button&gt;
              &lt;/DialogActions&gt;
            &lt;/Dialog&gt;
          &lt;/div&gt;
        );
      }
  
  </code></pre>