search

bokuweb / react-rnd

🖱 A resizable and draggable component for React.
https://bokuweb.github.io/react-rnd/stories
MIT License
3.85k stars 322 forks source link

Resize position doesn't work properly in NextJs 14 and React concurrent mode #944

Open shuo-hiwintech opened 1 month ago

shuo-hiwintech commented 1 month ago

Overview of the problem

I'm using react-rnd version [10.4.11]

My browser is: Chrome

I am sure this issue is not a duplicate?yes

Reproduced project

https://codesandbox.io/p/sandbox/interesting-archimedes-5cwk3x?file=%2Fsrc%2Findex.js%3A5%2C1

Description

When I use react-rnd in React 18 Concurrent Mode as well as in Next JS 14, I find that whenever I trigger the onResize event on the Rnd component, the value of position.x I get is not accurate. However, in the same case, if I change to React 18 Legacy Mode, i.e. rendering my item using ReactDOM.render(), I am able to get the position.x value correctly.

Steps to Reproduce

  1. click here https://codesandbox.io/p/sandbox/interesting-archimedes-5cwk3x?file=%2Fsrc%2Findex.js%3A5%2C1
  2. Open src/index.js and switch to Concurrent Mode.
  3. Resize the page element to the left and check the console, you will see that even if you resize to the leftmost position.x will not be 0, but if you go back to src/index.js and try again after switching to Legacy Mode, everything will be fine.

Expected behavior

position.x gets the correct value

Actual behavior

position.x gets an incorrect value

shuo-hiwintech commented 1 month ago

This is not a problem in react-rnd@10.4.9, but onResize is called back an unusually high number of times