Визуализация компонента диалога в цикле несколько раз

Question

Я сейчас экспериментирую с React и Material-UI.

У меня есть компонент, который включает в себя другой компонент.Внутри render() я перебираю псевдомассив, который отображает компонент <FormDialog />.

  <ul>
     {tableContent.map((item, i) => 
       <li key={i}>{item.x}
          <FormDialog/>
      </li>
  )}
  </ul>

При проверке DOM с использованием REACT-TOOLS я, конечно, вижу, что компонент Dialog находится там 3 раза.

В настоящее время я спрашиваю себя, является ли это плохой практикой и приведет ли это к серьезным проблемам с производительностью в реальном мире, когда я рендую Компонент примерно 20-50 раз.

В случае, если это проблема

Что мне действительно нравится, так это то, что компонент Dialog просто работает "из коробки" и не нуждается ни в каком другом компоненте "action" длябыть открытым или закрытым.Поэтому я не вижу возможности сохранить отличную самосогласованную функциональность компонента диалога, когда этот пример будет плохой практикой и принесет мне большие проблемы с производительностью.

Это диалоговый компонент, только что скопированный из демо-версии Material-UI:

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
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 class FormDialog extends React.Component {
  state = {
    open: false,
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
          Open form dialog
        </Button>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <DialogContentText>
              To subscribe to this website, please enter your email address here. We will send
              updates occasionally.
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Email Address"
              type="email"
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleClose} color="primary">
              Subscribe
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

Итак, о чем я вас спрашиваю

1)Я хотел бы знать, является ли то, что я описал, плохим, и его следует избегать в реальном мире, например

2) Какие бы простые варианты я оставил, чтобы сохранить самосогласованную функциональность компонента, но сделать его правильный путь .Я действительно хотел бы избежать удержания открытого состояния компонента диалога в родительском компоненте.