react-modal icon indicating copy to clipboard operation
react-modal copied to clipboard

Modal body is being re-rendered before unmounting when isOpen is set to false

Open akirchmyer opened this issue 5 years ago • 0 comments

Summary:

I have an isOpen checking the existence of an item that the modal body requires:

<Modal
    isOpen={!!this.state.item}
    onRequestClose={() => this.setState({ item: null })}
>
    <ModalBody item={item} />
</Modal> 

When onRequestClose is called, the modal body is re-rendering once with item={null} before the body unmounts. This is throwing unwanted errors in my application when referencing the item being passed into my modal body.

Steps to reproduce:

  1. Have isModal check the existence of an item
  2. Have a modal body that depends on that item not being null
  3. Have some mechanism that sets the item to null. The body will unmount, but before it does, it quickly will re-render with item={null}

Expected behavior:

The body will unmount without re-rendering with a null value

Link to example of issue:

Example of the error: https://codepen.io/akirchmyer/pen/QWjREVJ

Additional notes:

akirchmyer avatar May 26 '20 20:05 akirchmyer