Passing any react component instances in the tree results in a "Too much recursion" er

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Too much recursion about react-infinity-menu HOT 6 CLOSED

socialtables commented on July 20, 2024

Too much recursion

from react-infinity-menu.

Comments (6)

tiansijie commented on July 20, 2024

@Freakazo could you tell me roughly how big your tree is?

from react-infinity-menu.

Freakazo commented on July 20, 2024

The intent is to add in total roughly a hundred leaf nodes, would that be a problem?

I should have specified, the controlItems in the tree above is defined as

let controlItems = [
<ControlItem/>,
]

I get the same error when using something like a Hello react component instance.

The full tree is below as used is below, no adding of leaf nodes at the moment.

        this.state = {
            tree: [
                {
                    name: "controls", /*require*/
                    id: 0, /*require*/
                    isOpen: false, /*require*/
                    customComponent: ControlManage,
                    controlItems: controlItems
                },
                {
                    name: "Dementia",
                    id: 1,
                    isOpen: false,
                    customComponent: ControlIcon,
                    icon: "transform",
                    depth: 0,
                    children: [
                        {
                            id: 0,
                            name: "Any",
                            value: "ALL",
                            customComponent: Select,
                            onSelect: this.handleDementiaClick
                        },
                        {
                            id: 1,
                            name: "Dementia Only",
                            value: "YES",
                            customComponent: Select,
                            onSelect: this.handleDementiaClick
                        },
                        {
                            id: 2,
                            name: "Non Dementia Only",
                            value: "NO",
                            customComponent: Select,
                            onSelect: this.handleDementiaClick
                        },
                    ]
                },
                {
                    name: "Regions",
                    id: 3,
                    isOpen: false, 
                    customComponent: ControlIcon,
                    icon: "layers_clear",
                    depth: 0,
                    children: []
                },
                {
                    name: "Sizes",
                    id: 4,
                    isOpen: false,
                    customComponent: ControlIcon,
                    icon: "aspect_ratio",
                    depth: 0,
                    children: []
                }
            ]
        };

from react-infinity-menu.

tiansijie commented on July 20, 2024

a hundred leaf nodes should be fine. deep copy is slow, but I don't see why will causing your problem. Deep copy here mainly for usage of search

from react-infinity-menu.

Freakazo commented on July 20, 2024

It might be because of a circular reference inside a react component that deep-copy doesn't handle.

Would changing the copy library from deep-copy to the much more popular deepcopy be welcome?
That's if it actually solves the original issue and has no other side effects.

If so I will spend some time testing it and submit a pull request.

https://www.npmjs.com/package/deepcopy
https://www.npmjs.com/package/deep-copy

from react-infinity-menu.