react-super-treeview icon indicating copy to clipboard operation
react-super-treeview copied to clipboard

Rendering hangs when there are React elements in node name

Open migichen opened this issue 3 years ago • 0 comments

The browser page hangs or is very slow when there are some (like 10+) nodes with React elements. Here is simplified code:

<SuperTreeview
    data={this.state.data}
    ...
    />
...
this.setState({
  data: [
  {id: 0, name: (
    <span id="item">
        <a href={"http://www.example.com/"}>example</a>
        <span className="mx-1">
          - some time stamp
        </span>
      </span>) }
, ...(repeat above  10+ times)
]}

Loading the page initially should be ok. But if I click on a checkbox or expand a node, the page starts to hang.

When the page is about to hang, from browser debugger I see very deep call stack starting from the _find2. I guess the issue with the usage of _find2 is that it recursively looks into the deep React element tree. This seems an implementation flaw. As this project seems not active recently, please let me know any workaround. Thanks!

migichen avatar Apr 28 '22 09:04 migichen