docs(collections): explain updating collection structure#10232
Open
patrickwehbe wants to merge 1 commit into
Open
docs(collections): explain updating collection structure#10232patrickwehbe wants to merge 1 commit into
patrickwehbe wants to merge 1 commit into
Conversation
Adds a subsection to the Collections guide explaining that state controlling which items exist must live above the collection component, because collections are built by parsing a hidden render of the JSX before the real content renders. Closes adobe#10199
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
Closes #10199
✅ Pull Request Checklist:
📝 Test Instructions:
Docs-only change. Build the docs site and view the Collections page (
react-aria/collections); the new "Updating the collection structure" subsection appears between "Dependencies" and "Combining collections".🧢 Your Project:
React Aria docs
This adds a focused subsection to the Collections guide explaining a behavior that has tripped up several users (see #10199): state that controls which items exist in a collection must live above the collection component.
Collections are built by parsing the JSX tree itself rather than the output of the render function. To do that, the component renders a hidden copy of its children up to each item boundary to build the collection document, and only then renders the real, interactive content. Because these are two separate renders, a state update inside the collection's children re-renders only the visible content and never re-runs the hidden structure pass, so toggling local state (e.g. from
SelectStateContextinside aSelectpopover) cannot add or remove items. Lifting that state above the collection re-runs both passes.Per @snowystinger's suggestion in the issue this lives in the Collections page since it applies to all collections, not just
Select. The explanation adapts @nwidynski's write-up from the issue thread. Prose only; no API changes.