Memory leaks

[zhuoyan123]

use react-moveable，when I destroy moveable after Component unmount，can not delete node，it still in Detached HTMLDivElement。 this is my code

import { useState, useRef } from 'react'
import { useEffect } from 'react'
import Moveable from 'react-moveable'
import { getElementMatrix } from 'css-to-mat'

const Move = () => {
  const [activeItem, setActiveItem] = useState()
  const ref = useRef()

  useEffect(() => {
    let a = ref.current
    return () => {
      setActiveItem(null)
      a.destroy()
      a.moveable.destroy()
      a = null
    }
  }, [])

  return (
    <div className="App" style={{ position: 'relative', width: 1200, height: 800 }}>
      <div onClick={(e) => setActiveItem(e.currentTarget)} style={{ position: 'absolute', left: 0, top: 0 }}>
        <img src="https://gd2.alicdn.com/imgextra/i2/1607379596/O1CN01mtjx3s2Kl1GeLymyS_!!1607379596-0-lubanu-s.jpg_400x400.jpg" alt="" />
      </div>
      <Moveable
        ref={ref}
        className="custom-moveable-control"
        target={activeItem}
        draggable
        resizable
        throttleDrag={0}
        startDragRotate={0}
        throttleDragRotate={0}
        zoom={1}
        origin={false}
        renderDirections
        padding={{ left: 0, top: 0, right: 0, bottom: 0 }}
        onDragStart={(e) => {
          const mat = getElementMatrix(e.target)
          e.set([mat[12], mat[13]])
        }}
        onDrag={(e) => {
          e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`
        }}
        // onDragEnd={handleDragEndElement}
        onResizeStart={(e) => {
          e.inputEvent.stopPropagation()
          e.setOrigin(['%', '%'])
          const mat = getElementMatrix(e.target)
          if (e.dragStart) e.dragStart.set([mat[12], mat[13]])
        }}
        onResize={(e) => {
          e.inputEvent.stopPropagation()
          const { beforeTranslate } = e.drag
          const width = e.width < 10 ? 10 : e.width
          const height = e.height < 10 ? 10 : e.height
          e.target.style.width = `${width}px`
          if (e.target.getAttribute('el-type') !== 'normal_fonts') {
            e.target.style.height = `${height}px`
            e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`
          }
        }}
      />
    </div>
  )
}

function App() {
  const [visible, setVisible] = useState(false)

  return (
    <div>
      <div>
        <button onClick={() => setVisible(true)}>显示</button>
        <button onClick={() => {
          setVisible(false)
        }}>隐藏</button>
      </div>
      {
        visible && <Move />
      }
    </div>
  );
}

export default App;

[daybrush]

@zhuoyan123

It seems like a problem with react.

There are a lot of people with similar problems and it is said that it happens in dev mode.