从 Material UI Table 和 Modal - React 了解内存泄漏

Question

我的 React 应用程序中有两个文件，我认为其中一个文件发生内存泄漏。本质上，其中一个文件是MaterialTable，另一个是使用Dialog的模态，两者都是Material UI核心组件。

在我的 MaterialTable 中，我基本上有一个按钮可以打开模式，其中包含比 table 中显示的信息更多的信息。作为我的代码的总结，这些是有问题的两个文件：

myTable.js

const [isModalOpen, setIsModalOpen] = useState(false)

const myTable = () => {
  return (
    <div>

    <MyModal
      isModalOpen={isModalOpen}
      setIsModalOpen={setIsModalOpen}
    />

    <MaterialTable
      data={/*my data goes here*/}
      actions={[
        {
          icon: "edit",
          tooltip: "More information",
          onClick: (_event, rowData) => {
            /* open modal */
            setIsModalOpen(true)
          }
        }
      ]}

    </div>
  )
}

后续模态文件如下所示：

myModal.js

const MyModal = (isModalOpen, setIsModalOpen) => {
  return (
    <Dialog open={isModalOpen} maxWidth={"md"} fullWidth={true}
      /* display some stuff in the modal view
    </Dialog>
  )
}

当我在 myTable.js 中多次打开和关闭模式时，出现内存泄漏。从 DevTools 中调查内存后，我可以看到以下内容（对于糟糕的分辨率表示歉意）：

两个 objects/strings 似乎都来自 Material UI。在其中一个对象示例中，我可以看到它可能来自 node_modules/@material-ui/core/esm/Slider/Slider.js。我不太确定我需要做什么才能解决这个问题。

澄清一下，我的代码的任何部分都没有 calc(...) 字符串，因此我相信它源自 Material UI 组件之一。

我从哪里开始确定问题and/or我怎样才能解决它？

Answer 1

问题是我在另一个文件中为 Material-Table 定义了 options 和 columns。事实证明，这可能是一个已知问题，如下所示：https://github.com/mbrn/material-table/issues/2650

因此，在定义 table 的同一组件中声明 options 和 columns 解决了内存泄漏问题。

从 Material UI Table 和 Modal - React 了解内存泄漏

Understanding Memory Leak from Material UI Table and Modal - React

javascript

memory-leaks

reactjs

react-hooks