Is there a performance difference between this two sets of code below? Another thing, I notice that when I use the 2nd option is that when I close the modal, there's some bit of flash of undefined text in the modal

Which is the better way to do or are there better ways to do it?

1st

{notesModalState.open && (
  <NotesModal
    isOpen={notesModalState.open}
    onClose={() => handleNotesModal({ open: false})}
  />
)}

2nd

<NotesModal
  isOpen={notesModalState.open}
  onClose={() => handleNotesModal({ open: false})}
/>

NotesModal

const NotesModal = ({
  isOpen = false,
  onClose = () => {},
  onSuccess = () => {},
}: NotesModalProps) => {
 const notesData = data //retrieve from something

const [note, setNote] = useState<string>(notesData?.notes || "");

  // useEffect(() => {
  //   setNote(notesData || "");
  // }, [notesData]);

  const saveNote = async () => {
    // call API
  };

  const handleClose = () => {
    onClose();
  };

  const recipientName = notesData?.fullName

  return (
    <Dialog
      open={isOpen}
      maxWidth="sm"
      fullWidth
    >
      <>
        <DialogTitle>
          <Box display="flex" justifyContent="flex-end" alignItems="center">
            <Box display="flex" justifyContent="flex-end">
              <IconButton onClick={handleClose}>
                <FontAwesomeIcon
                  icon={faTimes}
                  className="text-secondary"
                  style={{ width: "1.7rem", height: "1.7rem" }}
                />
              </IconButton>
            </Box>
          </Box>
        </DialogTitle>
        <DialogContent>
          <Box gap={3} display="flex" flexDirection="column">
            <Box>
              <Typography variant="h4">Note for {recipientName}</Typography>
            </Box>
              <TextField
                multiline
                rows={4}
                value={note}
                onChange={(e) => setNote(e.target.value)}
                fullWidth
              />
          </Box>
        </DialogContent>
        <Stack
          direction={{ sm: "row", xs: "column-reverse" }}
          justifyContent="flex-end"
          spacing={2}
          padding={3}
        >
            <>
              <Button
                color="primary"
                onClick={handleClose}
                variant="outlined"
                disabled={isLoading}
              >
                Cancel
              </Button>
              <Button
                variant="contained"
                onClick={saveNote}
                disabled={isLoading}
              >
                Submit
              </Button>
            </>
        </Stack>
      </>
    </Dialog>
  );
};

Is there a performance difference between this two sets of code below? Another thing, I notice that when I use the 2nd option is that when I close the modal, there's some bit of flash of undefined text in the modal

Which is the better way to do or are there better ways to do it?

1st

{notesModalState.open && (
  <NotesModal
    isOpen={notesModalState.open}
    onClose={() => handleNotesModal({ open: false})}
  />
)}

2nd

<NotesModal
  isOpen={notesModalState.open}
  onClose={() => handleNotesModal({ open: false})}
/>

NotesModal

const NotesModal = ({
  isOpen = false,
  onClose = () => {},
  onSuccess = () => {},
}: NotesModalProps) => {
 const notesData = data //retrieve from something

const [note, setNote] = useState<string>(notesData?.notes || "");

  // useEffect(() => {
  //   setNote(notesData || "");
  // }, [notesData]);

  const saveNote = async () => {
    // call API
  };

  const handleClose = () => {
    onClose();
  };

  const recipientName = notesData?.fullName

  return (
    <Dialog
      open={isOpen}
      maxWidth="sm"
      fullWidth
    >
      <>
        <DialogTitle>
          <Box display="flex" justifyContent="flex-end" alignItems="center">
            <Box display="flex" justifyContent="flex-end">
              <IconButton onClick={handleClose}>
                <FontAwesomeIcon
                  icon={faTimes}
                  className="text-secondary"
                  style={{ width: "1.7rem", height: "1.7rem" }}
                />
              </IconButton>
            </Box>
          </Box>
        </DialogTitle>
        <DialogContent>
          <Box gap={3} display="flex" flexDirection="column">
            <Box>
              <Typography variant="h4">Note for {recipientName}</Typography>
            </Box>
              <TextField
                multiline
                rows={4}
                value={note}
                onChange={(e) => setNote(e.target.value)}
                fullWidth
              />
          </Box>
        </DialogContent>
        <Stack
          direction={{ sm: "row", xs: "column-reverse" }}
          justifyContent="flex-end"
          spacing={2}
          padding={3}
        >
            <>
              <Button
                color="primary"
                onClick={handleClose}
                variant="outlined"
                disabled={isLoading}
              >
                Cancel
              </Button>
              <Button
                variant="contained"
                onClick={saveNote}
                disabled={isLoading}
              >
                Submit
              </Button>
            </>
        </Stack>
      </>
    </Dialog>
  );
};

• javascript
• reactjs
• material-ui

1 Answer 1

Assumming you are internally using a Dialog component from a UI library (like MUI), the second approach is preferred, since it gives the component the responsibility to handle its closing behaviour (like closing transition).

The first approach completely unmount the modal when the state changes, so you may notice that in case the modal has a transition effect on close, it will be completely skipped.

Performance wise, you may assume the second is one is better, but probably not the proper thing to do.

Regarding the undefined issue you are mentioning, you are probably trying to show data that has not been loaded yet, you may want to add a condition to avoid doing so white it's still loading.