Library

React Components / v9 (@fluentui/react-components)

System Info

react-tree-preview: https://github.com/microsoft/fluentui/blob/f14628ac44d2cea2301452829d9775e49f70b824/packages/react-components/react-tree-preview/src/components/TreeItem/useTreeItem.tsx#L33C1-L35C5

Are you reporting Accessibility issue?

None

Bug Description

Actual Behavior

useTreeItem creates new handleActionsRef on each render which can cause its children TreeItemLayout to re-render.

For a simple example where clicking on a button moves item-6 to top, profiler shows two renders:

hook 13 here is the const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef); call in useTreeItemLayout.

Expected Behavior

When handleActionsRef is wrapped in useEventCallback, profiler shows one render as expected:

Logs

No response

Requested priority

Low

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.