fix(dnd): add useDynamicDescription to prevent unnecessary re-renders#9738
Open
reidbarber wants to merge 2 commits intomainfrom
Open
fix(dnd): add useDynamicDescription to prevent unnecessary re-renders#9738reidbarber wants to merge 2 commits intomainfrom
reidbarber wants to merge 2 commits intomainfrom
Conversation
snowystinger
reviewed
Mar 5, 2026
| function getOrCreateDynamicDescriptionNode(descriptionKey: string) { | ||
| let desc = dynamicDescriptionNodes.get(descriptionKey); | ||
| if (!desc) { | ||
| let id = `react-aria-description-${descriptionId++}`; |
Member
There was a problem hiding this comment.
in the case that multiple copies are loaded, this could create conflicting ids, better to use id generation like crypto.randomUUID
Member
There was a problem hiding this comment.
or put the id generation into the hooks and make use of useId
| }, [description]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| return () => { |
Member
There was a problem hiding this comment.
if you move this up to be in the first useLayoutEffect, then you can de-duplicate the refCount removal, always handle it in the cleanup of that effect
It'll make it more readable as well because creation and cleanup associated will be right next to each other
| } | ||
| }, [descriptionKey, description]); | ||
|
|
||
| useLayoutEffect(() => { |
Member
There was a problem hiding this comment.
what is the purpose of this effect? i can't quite figure it out, maybe it should also be merged into the effect above?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #2504
Adds a new
useDynamicDescriptionhook that gets used byuseDraganduseVirtualDrop.It solves the following issue with
useDescription:Our new hook changes the text content of the existing description node, so the 100 drag buttons do not need to re-render in this case. We need to key these, so that multiple consumers can reliably share the same node.
✅ Pull Request Checklist:
📝 Test Instructions:
In the RAC DnD Table story, open dev tools to inspect the element.
Alternative between clicking and tabbing to switch drag modalities, and observe:
🧢 Your Project: