Storing and Rendering State Instead of Direct DOM Manipulation Breaks in React 18

[SebastianBaltes]

Environments

• Framework name: react
• Framework version: 18.2.0
• Moveable Component version: 0.56
• Testable Address(optional): https://codesandbox.io/p/sandbox/cool-cherry-wrxggd?file=%2Fsrc%2FApp.tsx%3A45%2C1

Description

In my use case, I need to store the coordinates, size, and rotation of the target as React state and use that state to render the target instead of manipulating the DOM directly. In React 17, the following code snippet worked:

react 17 sandbox

  const targetRef = useRef<HTMLDivElement>(null);
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const [coords, setCoords] = useState({ x: 100, y: 50, w: 100, h: 100 });
  console.log(coords);
  return (
    <>
      <div
        ref={targetRef}
        className="target resizable"
        style={{
          left: coords.x + "px",
          top: coords.y + "px",
          width: coords.w + "px",
          height: coords.h + "px",
        }}
      >
        Target
      </div>
      <Moveable
        target={targetRef}
        draggable={true}
        resizable={true}
        onDragStart={() => {
          const { x, y } = coords;
          setOffset({ x, y });
        }}
        onResizeStart={() => {
          const { x, y } = coords;
          setOffset({ x, y });
        }}
        onDrag={({ translate }) => {
          const [x, y] = translate;
          setCoords({
            ...coords,
            x: x + offset.x,
            y: y + offset.y,
          });
        }}
        onResize={({ transform, width, height }) => {
          const [x, y] = transform
            .slice(transform.indexOf("(") + 1, transform.indexOf(")"))
            .split(",")
            .map((e) => parseFloat(e.trim().split("px")[0]));
          setCoords({
            x: x + offset.x,
            y: y + offset.y,
            w: width,
            h: height,
          });
        }}
      />
    </>
  );

However, with React 18, the same code does not work as expected:

react 18 sandbox

When resizing by dragging the top left handle, the coordinates diverge. The moveable component and the target split positions.

This may not be the correct way to use your library. How can I implement this use case correctly? It's important for me to manage the state and not use direct transformations because, under the hood, it's a Three.js object rendered on a 2D stage.