ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.72k stars 51.17k forks source link

App freezes after quickly opening and closing the modal #52625

Closed alvigr closed 2 days ago

alvigr commented 2 weeks ago

Reproduction link

Edit on StackBlitz

Steps to reproduce

The issue occurs when the modal window is closed programmatically shortly after being opened using asynchronous logic.

To reproduce the issue in my example, follow these steps:

  1. Open the link to the example: stackblitz .
  2. Click the "open and close modal" button.
  3. Click the "open and close modal" button again.
  4. Try pressing any button afterward.

What is expected?

What is actually happening?

Environment Info
antd 5.23.3
React 18.3.1
System macOS 15.1
Browser Chrome 132.0.6834.84
stackblitz[bot] commented 2 weeks ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

petercat-assistant[bot] commented 2 weeks ago

It seems you are experiencing an issue where the application freezes after quickly opening and closing a modal in your Ant Design project. This can happen due to asynchronous logic that might not be handled properly. Let's try to address this issue.

Possible Solutions:

  1. Debounce the Modal Actions: Implement a debounce function to ensure that the modal open and close actions are not triggered too quickly in succession. This can help prevent the application from freezing due to rapid state changes.

  2. Check State Management: Ensure that the state management logic is correctly implemented. Rapid state changes can sometimes cause issues if the state is not updated properly.

  3. Use useEffect Hook: If you are using React hooks, make sure that the useEffect hook is used correctly to handle side effects when the modal state changes.

  4. Error Handling: Implement error handling to catch any exceptions that might occur during the asynchronous operations.

  5. Optimize Render Logic: Ensure that the render logic is optimized and does not cause unnecessary re-renders which might lead to performance issues.

If you can share more details about the specific implementation or any error messages you are encountering, I can provide more targeted assistance.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

zombieJ commented 6 days ago

Test React 19 working as expect. Guess 18 has some sync logic problem which need to check.

https://stackblitz.com/edit/vitejs-vite-9d5xazpn?file=package.json

zombieJ commented 6 days ago

After debug, find that React 18 will merge the state into one render for open from true to false which make motion effect run. I'm not sure this is a bug for React since the reproduce code has the setTimeout which should not be auto batched.

zombieJ commented 6 days ago

Since for fix this will patch a state check for rc-motion which will be a break change of CSSMotion api. I will do the fix in antd v6 instead break v5.