Hovering tree node in Tree component causes re-render

[matejdostal]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.14.3

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

When using Tree component to display tree data, I encounter that each time when I hover mouse over tree node thie whole component is re-rendered.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[onkar-deshpande]

Please add a link to reproduce the issue

[xauuu]

Please add a link to reproduce the issue

https://codesandbox.io/p/sandbox/mantine-react-template-forked-48thrd

[yuki0410-dev]

@matejdostal @xauuu @onkar-deshpande ( @rtivital )

We have confirmed that this also occurs in the Controller Story of the Tree component's Storybook.

The onMouseOver and onMouseLeave events of the TreeNode component used in the tree are causing re-rendering due to the internal state of the useTree hooks changing.
(via setHoveredNode in the return value of useTree)
This state is used to determine the data-hovered attribute of the TreeNode.

If you do not need this attribute, you can suppress re-rendering by doing the following

export function Controller() {
  const tree = useTree({
    onNodeCollapse: (value) => console.log('Node collapsed:', value),
    onNodeExpand: (value) => console.log('Node expanded:', value),
  });
  console.log(tree);
  return (
    <div style={{ padding: 40 }}>
      <Tree data={data} tree={{...tree, setHoveredNode:()=>{}}} /> {/** Override setHoveredNode */}
      <Button onClick={() => tree.expandAllNodes()}>Expand all</Button>
      <Button onClick={() => tree.collapseAllNodes()}>Collapse all</Button>
    </div>
  );
}