Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Title Fix Regression: Key Validation Warning for Flattened Positional Children in React 19 Beta #32202

Open
Aatirhassanpir opened this issue Jan 23, 2025 · 1 comment
Labels

Comments

@Aatirhassanpir
Copy link

Repository Version

v19.0.0

Key Words / Search Terms

Flattened Positional Children
Key Validation Warning
React 19 Beta Regression
React.Children.toArray

Problem

The PR addresses a regression introduced in #29088 that causes the following warning in React 19 beta when rendering flattened positional children using React.Children utilities (e.g., React.Children.toArray):
The issue stems from refactored logic in React.Children dropping the element._store.validated property in development mode (DEV), resulting in React treating positional children as requiring key validation.

Solution

The PR fixes this regression by:
Ensuring that cloned elements inherit the element._store.validated property in development mode.
Adding unit tests to validate the behavior and prevent future regressions.

Steps to Reproduce

Use React 19 beta.
Render multiple flattened positional children using React.Children.toArray.
Observe the unnecessary key validation warning in development mode.

Expected Behavior

Flattened positional children rendered with React.Children utilities should not trigger key validation warnings.

Current Behavior

In React 19 beta, when flattened positional children are rendered using utilities like React.Children.toArray, an unnecessary warning is triggered during development. The warning says:

Warning: Each child in a list should have a unique "key" prop.

This behavior is unexpected because positional children, even when flattened, don’t require unique keys. The issue happens because the element._store.validated property is unintentionally dropped in the updated logic for React.Children in development mode (DEV).

Use Case / Motivation

This fix is needed to stop false-positive key validation warnings when working with flattened positional children. Without this fix, developers may be misled into thinking there's an actual problem with their implementation.
By addressing this issue
Developers will have a clearer debugging experience without unnecessary warnings cluttering the console.
It ensures that React utilities like React.Children.toArray work as intended, maintaining consistency and reliability for common use cases.

Tests Performed

Added new tests in ReactChildren-test.js to validate behavior.
Verified changes by running $ yarn test ReactChildren-test.js.

@Sardorbek-Kuvondikov
Copy link

Why doesn't create-react-app fully work in React 19v?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants