Why does the state switch while the function is running?

Question

The site has a button for deleting records (DeleteForeverIcon in the code). When you click on this button, a window opens (made according to the documentation using Dialog Mui).

When you click on the "Confirm" button, the handleDeleteItem() function is launched, which deletes the entry. But I can’t understand why the window closes while this function is running, because I don’t switch the state anywhere

Looking for a solution on my own, I added console.log() to my code (below is the same code, only with console.log()) and came up with the following conclusion: when I run the handleDeleteItem() function, the open state switches to false and so the window closes. But why does it switch to false?

export function DeleteButton({ item }) {
  const { urlParams } = useContext(PageContext)
  const { firestore } = useContext(AppContext)
  const [open, setOpen] = useState(false);

  console.log(open, "window close")                    // console.log here
  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleDeleteItem = async () => {
    console.log("start")                         // console.log here
    await deleteItem()
    console.log("finish")                        // console.log here
  }

  return (
      <ButtonGroup>
          <DeleteForeverIcon onClick={handleClickOpen}/>
    
          <Dialog
              open={open}
              onClose={handleClose}>
              
              <DialogActions>
                <Button onClick={handleClose}>Cancel</Button>
                <Button onClick={handleDeleteItem}>Confirm</Button>
              </DialogActions>

            </Dialog>
            
        </ButtonGroup >
  )
}

That is, summing up the question, I would like the window to close only after the deleteItem () function has completed, and not during its execution

Answer 1

Based on some further clarification in the comments, it seems as though your issue is to do with the fact that calling deleteItem(...) causes your state to update in your parent components (due to an onSnapshot firebase listener). Your parent components are responsible for rendering the children components. When your state updates, the item/row that you deleted won't be in the new state value, and so the component that was rendering your Dialog previously won't be rendered (because it has been deleted).

Here is a minified example of your issue:

const { useState } = React;
const List = () => {
  const [items, setItems] = useState(["a", "b", "c", "d", "e"]);
  
  const handleDelete = (charToDel) => {
    setItems(items => items.filter(char => char !== charToDel));
  }
  
  return <ul>
    {items.map(char =>
      <li key={char}>{char} - <DeleteButton value={char} onDelete={handleDelete}/></li>
    )}
  </ul>
}

const DeleteButton = ({value, onDelete}) => {
  const [open, setOpen] = useState(false);
  return <React.Fragment>
    <button onClick={() => setOpen(true)}>&times;</button>
    
    <dialog open={open}>
      <p>Delete {value}?</p>
      <button onClick={() => onDelete(value)}>Confirm</button>
    </dialog>
  </React.Fragment>
}

ReactDOM.createRoot(document.body).render(<List />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

So since you're not rendering the component that renders the Dialog once you remove the item, you won't be rendering the <Dialog> anymore and so it disappears.

One way to fix this is to lift the <Dialog> component up to a component that doesn't get removed when you remove an item from your state. By the looks of things, the closest parent component that has this property is DevicesTable. In there you can render your dialog and keep track of a selectedItem to determine which item that should be deleted, which you can set based on the item you press (see code comments below):

// DevicesTable component

const [selectedItem, setSelectedItem] = useState();

const handleClose = () => {
  setSelectedItem(null);
}

const handleDeleteItem = () => { // this doesn't need to be `async` if not using `await`
  deleteItem(selectedItem, firestore, urlParams); // this doesn't need to be `await`ed if you don't have any code following it
}

return (
    <>
      {/* vvvvvv -- move dialog here -- vvvvvv */}
      <Dialog open={!!selectedItem} onClose={handleClose}>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleDeleteItem}>Confirm</Button>
        </DialogActions>
      </Dialog>
      {/* ^^^^^^ -- move dialog here -- ^^^^^^ */}
      <TableContainer className="TableContainerGridStyle">
        <Table className="TableStyle">
          <DevicesTableHeader />
          <TableBody className="TableBodyStyle">
            {devices.map((device) =>
              <DevicesTableCell 
                device={device}
                onDeleteButtonPress={() => setSelectedItem(device)} /* <--- set the selected item */
                key={device.description.id}
              />
            )}
          </TableBody>
        </Table>
      </TableContainer>
    </>
);

For brevity, I've removed the open state and instead used the presence of the selectedItem to determine if the modal should be open or not, but you can of course add that back in if you wish and set both the selectedItem and the open state when opening and closing the modal.

Within DevicesTableCell, you would then grab the onDeleteButtonPress prop, and then pass it to DeleteButton like so:

//                                   v-- grab the function
function DevicesTableCell({ device, onDeleteButtonPress }) {
  ...
  <DeleteButton item={device} onDeleteButtonPress={onDeleteButtonPress}/> {/* pass it to the componennt */}
  ...
}

Within DeleteButton you should then invoke the onDeleteButtonPress function:

<DeleteForeverIcon onClick={onDeleteButtonPress} />

If you don't like the idea of passing callbacks down through multiple components like this, you can avoid that by using useReducer with a context, as described here.