Skip to content

fix(useTreeData): insert items into a child node with StrictMode#9824

Open
chirokas wants to merge 2 commits intoadobe:mainfrom
chirokas:tree-data-insert-child-node-strictmode
Open

fix(useTreeData): insert items into a child node with StrictMode#9824
chirokas wants to merge 2 commits intoadobe:mainfrom
chirokas:tree-data-insert-child-node-strictmode

Conversation

@chirokas
Copy link
Contributor

@chirokas chirokas commented Mar 22, 2026

Closes

See StackBlitz for more details.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

In the TreeWithDragAndDrop story:

  1. Drag "Projects" from Tree 1 to Tree 2.
  2. Drag an item from Tree 1 and drop it into "Projects" in Tree 2.
  3. The item should be inserted as a child of "Projects".

🧢 Your Project:

@chirokas chirokas marked this pull request as ready for review March 22, 2026 09:06
Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for the PR, it'd be great if you could fill in the description. I realise this is a fairly simple one, but it'd be nice to know the original issue and how to reproduce it/how you are using it that results in this issue. Also, any information on how you diagnosed the issue and how you landed on this fix.

It can be easier if an issue is opened first. This gives us a place to discuss the problem and possible fixes. It really helps us evaluate PRs instead of making a bunch of guesses.

Again, thank you for the PR.

insert(parentKey: Key | null, index: number, ...values: T[]) {
setItems(({items, nodeMap: originalMap}) => {
let {items: newNodes, nodeMap: newMap} = buildTree(values, originalMap, parentKey);
let {items: newNodes, nodeMap: newMap} = buildTree(values, new Map(originalMap), parentKey);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should the update function below also do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why, but the update function works fine with StrictMode.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been unable to find a case where it doesn't work. If we did need to make the change though, we'd need to create the new map outside of the updateTree function so if there's multiple items to update, we don't create a new map for each one.

insert(parentKey: Key | null, index: number, ...values: T[]) {
setItems(({items, nodeMap: originalMap}) => {
let {items: newNodes, nodeMap: newMap} = buildTree(values, originalMap, parentKey);
let {items: newNodes, nodeMap: newMap} = buildTree(values, new Map(originalMap), parentKey);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been unable to find a case where it doesn't work. If we did need to make the change though, we'd need to create the new map outside of the updateTree function so if there's multiple items to update, we don't create a new map for each one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants