title: Avoid re-render while open/close material-ui Dialog component
body: <p>I've got some problem with omit re-render while click button which open Dialog component. Currently I use useState flag which toggle my Dialog component but I must avoid re-rendering because there's expensive operations on big data.</p>
  <p>Anyone know approach how to Open Dialog by button <code>Open</code> and <code>Close</code> Dialog by click on Dialog's button <code>Exit</code>.</p>
  <pre><code>const Item = () =&gt; {
  
      const popupRef = useRef()
  
      const dialog = () =&gt; {
          return(
              &lt;Dialog ref={popupRef}
                      keepMounted
                      fullWidth
                      maxWidth=&quot;md&quot;
                      aria-labelledby=&quot;alert-dialog-slide-title&quot;
                      aria-describedby=&quot;alert-dialog-slide-description&quot;&gt;
                  &lt;DialogTitle id=&quot;alert-dialog-slide-title&quot;&gt;
                      &lt;WrapperDialogHeader&gt;Filters&lt;/WrapperDialogHeader&gt;
                      &lt;WrapperDialogCloseBtn&gt;
                          &lt;IconButton aria-label=&quot;close&quot; &gt;
                              &lt;CloseIcon /&gt;
                          &lt;/IconButton&gt;
                      &lt;/WrapperDialogCloseBtn&gt;
                  &lt;/DialogTitle&gt;
                  &lt;DialogContent&gt;
                     Something 
                  &lt;/DialogContent&gt;
                  &lt;DialogActions&gt;
                      &lt;Button variant=&quot;outlined&quot;
                              // onClick={ What handler here? }
                              color=&quot;primary&quot;&gt;
                          &lt;WrapperDialogOptionBtn&gt;Exit&lt;/WrapperDialogOptionBtn&gt;
                      &lt;/Button&gt;
                  &lt;/DialogActions&gt;
              &lt;/Dialog&gt;
          )
      }
  
      return(
          &lt;&gt;
              &lt;IconButton onClick={ /* What method here */ }&gt;
                  &lt;Typography variant=&quot;body1&quot; color=&quot;primary&quot;&gt;
                      &lt;FilterListIcon fontSize=&quot;small&quot; color=&quot;primary&quot;/&gt;&lt;WrapperFontSpecialSmall&gt;Filters&lt;/WrapperFontSpecialSmall&gt;
                  &lt;/Typography&gt;
              &lt;/IconButton&gt;
              { dialog() }
          &lt;/&gt;
  </code></pre>
  <p>Methods like <code>popupRef.current.click()</code> not exist in ES6 I suppose. <br/>
  How to build mechanism which toggle dialog without re-render whole component Item.</p>