Fix key Warning for Flattened Positional Children
#29662
Merged
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Comparing: c2b45ef...49267d4 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
javache
approved these changes
May 30, 2024
Comment on lines
+871
to
+888
| it('does not warn for flattened positional children', async () => { | ||
| function ComponentRenderingFlattenedChildren({children}) { | ||
| return <div>{React.Children.toArray(children)}</div>; | ||
| } | ||
|
|
||
| const container = document.createElement('div'); | ||
| const root = ReactDOMClient.createRoot(container); | ||
| await expect(async () => { | ||
| await act(() => { | ||
| root.render( | ||
| <ComponentRenderingFlattenedChildren> | ||
| <div /> | ||
| <div /> | ||
| </ComponentRenderingFlattenedChildren>, | ||
| ); | ||
| }); | ||
| }).toErrorDev([]); | ||
| }); |
There was a problem hiding this comment.
Maybe add another example where it does still correctly warn if an array was used without keys?
There was a problem hiding this comment.
we should have test for this already
There was a problem hiding this comment.
Surprisingly, we don't for the simple case. (We do for iterables of children.)
| @@ -966,6 +966,11 @@ export function cloneAndReplaceKey(oldElement, newKey) { | |||
| __DEV__ && enableOwnerStacks ? oldElement._debugStack : undefined, | |||
| __DEV__ && enableOwnerStacks ? oldElement._debugTask : undefined, | |||
| ); | |||
| if (__DEV__) { | |||
| // The cloned element should inherit the original element's key validation. | |||
| clonedElement._store.validated = oldElement._store.validated; | |||
There was a problem hiding this comment.
Do we need to check if oldElement._store exists? We do so in other calls.
There was a problem hiding this comment.
I noticed that, too.
I don't think it's necessary because we always define it in __DEV__, and we also assume it exists shortly after this method call (when we conditionally set validated to 2).
There was a problem hiding this comment.
Perhaps the other call sites check for _store because they might be receiving malformed elements (e.g. constructed by third party libraries or something).
But here, we are creating clonedElement.
github-actions bot
pushed a commit
that referenced
this pull request
May 30, 2024
## Summary #29088 introduced a regression triggering this warning when rendering flattened positional children: > Each child in a list should have a unique "key" prop. The specific scenario that triggers this is when rendering multiple positional children (which do not require unique `key` props) after flattening them with one of the `React.Children` utilities (e.g. `React.Children.toArray`). The refactored logic in `React.Children` incorrectly drops the `element._store.validated` property in `__DEV__`. This diff fixes the bug and introduces a unit test to prevent future regressions. ## How did you test this change? ``` $ yarn test ReactChildren-test.js ``` DiffTrain build for commit 72644ef.
github-actions bot
pushed a commit
that referenced
this pull request
May 30, 2024
## Summary #29088 introduced a regression triggering this warning when rendering flattened positional children: > Each child in a list should have a unique "key" prop. The specific scenario that triggers this is when rendering multiple positional children (which do not require unique `key` props) after flattening them with one of the `React.Children` utilities (e.g. `React.Children.toArray`). The refactored logic in `React.Children` incorrectly drops the `element._store.validated` property in `__DEV__`. This diff fixes the bug and introduces a unit test to prevent future regressions. ## How did you test this change? ``` $ yarn test ReactChildren-test.js ``` DiffTrain build for [72644ef](72644ef)
yungsters
added a commit
that referenced
this pull request
May 31, 2024
## Summary In #29088, the validation logic for `React.Children` inspected whether `mappedChild` — the return value of the map callback — has a valid `key`. However, this deviates from existing behavior which only warns if the original `child` is missing a required `key`. This fixes false positive `key` validation warnings when using `React.Children`, by validating the original `child` instead of `mappedChild`. This is a more general fix that expands upon my previous fix in #29662. ## How did you test this change? ``` $ yarn test ReactChildren-test.js ```
github-actions bot
pushed a commit
that referenced
this pull request
May 31, 2024
## Summary In #29088, the validation logic for `React.Children` inspected whether `mappedChild` — the return value of the map callback — has a valid `key`. However, this deviates from existing behavior which only warns if the original `child` is missing a required `key`. This fixes false positive `key` validation warnings when using `React.Children`, by validating the original `child` instead of `mappedChild`. This is a more general fix that expands upon my previous fix in #29662. ## How did you test this change? ``` $ yarn test ReactChildren-test.js ``` DiffTrain build for commit 8fd963a.
github-actions bot
pushed a commit
that referenced
this pull request
May 31, 2024
## Summary In #29088, the validation logic for `React.Children` inspected whether `mappedChild` — the return value of the map callback — has a valid `key`. However, this deviates from existing behavior which only warns if the original `child` is missing a required `key`. This fixes false positive `key` validation warnings when using `React.Children`, by validating the original `child` instead of `mappedChild`. This is a more general fix that expands upon my previous fix in #29662. ## How did you test this change? ``` $ yarn test ReactChildren-test.js ``` DiffTrain build for [8fd963a](8fd963a)
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.
Summary
#29088 introduced a regression triggering this warning when rendering flattened positional children:
The specific scenario that triggers this is when rendering multiple positional children (which do not require unique
keyprops) after flattening them with one of theReact.Childrenutilities (e.g.React.Children.toArray).The refactored logic in
React.Childrenincorrectly drops theelement._store.validatedproperty in__DEV__. This diff fixes the bug and introduces a unit test to prevent future regressions.How did you test this change?