Defining Tree's data inside a React component together with useTree causes infinite re-render

[mohammad-reza-rahbar]

Dependencies check up

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

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

7.13.0

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

I spend hours to figure out defining Tree's data inside a React component when using useTree hook causes an infinite re-render!

import { Tree, useTree } from '@mantine/core';

export function Demo() {
  console.log('render');

  const tree = useTree();

  const data = [
    {
      label: 'mantine',
      value: 'mantine',
    },
  ];

  return <Tree data={data} tree={tree} />; 
}

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

[mikhail-molchanov]

Most likely caused by some state change that happens upon tree controller initialization, in combination with the data array that is re-created from scratch on every render. Little you can do about it except for moving your data outside the component to have a stable reference.