Repository navigation
Add Transition Types - #32105
Add Transition Types#32105
Conversation
Pass it to startViewTransition.
This lets you use types to trigger different imperative animations.
This adds navigation direction add Transition Types. This lets us specify an animation that cross-fades for normal push but slides left or right depending on if it's forward or back navigation.
…n type This is more convenient than the CSS form.
|
Comparing: 1185f88d35e83870aa220a30ddcec22ed7e8e362...0c001810f109b0b1e44012bde522826b1918d5b4 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
|
| if (nextIndex > previousIndex) { | ||
| addTransitionType('navigation-forward'); | ||
| } else if (nextIndex < previousIndex) { | ||
| addTransitionType('navigation-back'); |
There was a problem hiding this comment.
This is an example of how a canonical router implementation could add these types.
We could even go as far as just listening to Navigation Events ourselves in React and have these built-in but it's probably better to leave that up to routers since the intercepts could be doing things we're not aware of.
|
amazing,very good! |
jackpope
left a comment
There was a problem hiding this comment.
What's the path for getting test coverage for these view transition features? I'm assuming its difficult to mock within unit tests, hence extra fixture examples. And here transition types are only exposed to the view transition events. But any ideas on how to prevent future regressions here?
|
Is it possible that no renderer claims the types and .V ends up not getting cleared? |
|
Yea if you don't ever call I think we've had some early bailouts that might trigger if a render leads to no effects. We probably should do that more. |
This adds an isomorphic API to add Transition Types, which represent the
cause, to the current Transition. This is currently mainly for View
Transitions but as a concept it's broader and we might expand it to more
features and object types in the future.
```js
import { unstable_addTransitionType as addTransitionType } from 'react';
startTransition(() => {
addTransitionType('my-transition-type');
setState(...);
});
```
If multiple transitions get entangled this is additive and all
Transition Types are collected. You can also add more than one type to a
Transition (hence the `add` prefix).
Transition Types are reset after each commit. Meaning that `<Suspense>`
revealing after a `startTransition` does not get any View Transition
types associated with it.
Note that the scoping rules for this is a little "wrong" in this
implementation. Ideally it would be scoped to the nearest outer
`startTransition` and grouped with any `setState` inside of it.
Including Actions. However, since we currently don't have AsyncContext
on the client, it would be too easy to drop a Transition Type if there
were no other `setState` in the same `await` task. Multiple Transitions
are entangled together anyway right now as a result. So this just tracks
a global of all pending Transition Types for the next Transition. An
inherent tricky bit with this API is that you could update multiple
roots. In that case it should ideally be associated with each root.
Transition Tracing solves this by associating a Transition with any
updates that are later collected but this suffers from the problem
mentioned above. Therefore, I just associate Transition Types with one
root - the first one to commit. Since the View Transitions across roots
are sequential anyway it kind of makes sense that only one really is the
cause and the other one is subsequent.
Transition Types can be used to apply different animations based on what
caused the Transition. You have three different ways to choose from for
how to use them:
## CSS
It integrates with [View Transition
Types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples)
so you can match different animations based on CSS scopes:
```css
:root:active-view-transition-type(my-transition-type) {
&::view-transition-...(...) {
...
}
}
```
This is kind of a PITA to write though and if you have a CSS library
that provide View Transition Classes it's difficult to import those into
these scopes.
## Class per Type
This PR also adds an object-as-map form that can be passed to all
`className` properties:
```js
<ViewTransition className={{
'my-navigation-type': 'hello',
'default': 'world',
}}>
```
If multiple types match, then they're joined together. If no types match
then the special `"default"` entry is used instead. If any type has the
value `"none"` then that wins and the ViewTransition is disabled (not
assigned a name).
These can be combined with `enter`/`exit`/`update`/`layout`/`share`
props to match based on kind of trigger and Transition Type.
```js
<ViewTransition enter={{
'navigation-back': 'enter-right',
'navigation-forward': 'enter-left',
}}
exit={{
'navigation-back': 'exit-right',
'navigation-forward': 'exit-left',
}}>
```
## Events
In addition, you can also observe the types in the View Transition Event
callbacks as the second argument. That way you can pick different
imperative Animations based on the cause.
```js
<ViewTransition onUpdate={(inst, types) => {
if (types.includes('navigation-back')) {
...
} else if (types.includes('navigation-forward')) {
...
} else {
...
}
}}>
```
## Future
In the future we might expose types to `useEffect` for more general
purpose usage. This would also allow non-View Transition based
Animations such as existing libraries to use this same feature to
coordinate the same concept.
We might also allow richer objects to be passed along here. Only the
strings would apply to View Transitions but the imperative code and
effects could do something else with them.
DiffTrain build for [028c8e6](028c8e6)
This adds an isomorphic API to add Transition Types, which represent the
cause, to the current Transition. This is currently mainly for View
Transitions but as a concept it's broader and we might expand it to more
features and object types in the future.
```js
import { unstable_addTransitionType as addTransitionType } from 'react';
startTransition(() => {
addTransitionType('my-transition-type');
setState(...);
});
```
If multiple transitions get entangled this is additive and all
Transition Types are collected. You can also add more than one type to a
Transition (hence the `add` prefix).
Transition Types are reset after each commit. Meaning that `<Suspense>`
revealing after a `startTransition` does not get any View Transition
types associated with it.
Note that the scoping rules for this is a little "wrong" in this
implementation. Ideally it would be scoped to the nearest outer
`startTransition` and grouped with any `setState` inside of it.
Including Actions. However, since we currently don't have AsyncContext
on the client, it would be too easy to drop a Transition Type if there
were no other `setState` in the same `await` task. Multiple Transitions
are entangled together anyway right now as a result. So this just tracks
a global of all pending Transition Types for the next Transition. An
inherent tricky bit with this API is that you could update multiple
roots. In that case it should ideally be associated with each root.
Transition Tracing solves this by associating a Transition with any
updates that are later collected but this suffers from the problem
mentioned above. Therefore, I just associate Transition Types with one
root - the first one to commit. Since the View Transitions across roots
are sequential anyway it kind of makes sense that only one really is the
cause and the other one is subsequent.
Transition Types can be used to apply different animations based on what
caused the Transition. You have three different ways to choose from for
how to use them:
## CSS
It integrates with [View Transition
Types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples)
so you can match different animations based on CSS scopes:
```css
:root:active-view-transition-type(my-transition-type) {
&::view-transition-...(...) {
...
}
}
```
This is kind of a PITA to write though and if you have a CSS library
that provide View Transition Classes it's difficult to import those into
these scopes.
## Class per Type
This PR also adds an object-as-map form that can be passed to all
`className` properties:
```js
<ViewTransition className={{
'my-navigation-type': 'hello',
'default': 'world',
}}>
```
If multiple types match, then they're joined together. If no types match
then the special `"default"` entry is used instead. If any type has the
value `"none"` then that wins and the ViewTransition is disabled (not
assigned a name).
These can be combined with `enter`/`exit`/`update`/`layout`/`share`
props to match based on kind of trigger and Transition Type.
```js
<ViewTransition enter={{
'navigation-back': 'enter-right',
'navigation-forward': 'enter-left',
}}
exit={{
'navigation-back': 'exit-right',
'navigation-forward': 'exit-left',
}}>
```
## Events
In addition, you can also observe the types in the View Transition Event
callbacks as the second argument. That way you can pick different
imperative Animations based on the cause.
```js
<ViewTransition onUpdate={(inst, types) => {
if (types.includes('navigation-back')) {
...
} else if (types.includes('navigation-forward')) {
...
} else {
...
}
}}>
```
## Future
In the future we might expose types to `useEffect` for more general
purpose usage. This would also allow non-View Transition based
Animations such as existing libraries to use this same feature to
coordinate the same concept.
We might also allow richer objects to be passed along here. Only the
strings would apply to View Transitions but the imperative code and
effects could do something else with them.
DiffTrain build for [028c8e6](028c8e6)
This adds an isomorphic API to add Transition Types, which represent the
cause, to the current Transition. This is currently mainly for View
Transitions but as a concept it's broader and we might expand it to more
features and object types in the future.
```js
import { unstable_addTransitionType as addTransitionType } from 'react';
startTransition(() => {
addTransitionType('my-transition-type');
setState(...);
});
```
If multiple transitions get entangled this is additive and all
Transition Types are collected. You can also add more than one type to a
Transition (hence the `add` prefix).
Transition Types are reset after each commit. Meaning that `<Suspense>`
revealing after a `startTransition` does not get any View Transition
types associated with it.
Note that the scoping rules for this is a little "wrong" in this
implementation. Ideally it would be scoped to the nearest outer
`startTransition` and grouped with any `setState` inside of it.
Including Actions. However, since we currently don't have AsyncContext
on the client, it would be too easy to drop a Transition Type if there
were no other `setState` in the same `await` task. Multiple Transitions
are entangled together anyway right now as a result. So this just tracks
a global of all pending Transition Types for the next Transition. An
inherent tricky bit with this API is that you could update multiple
roots. In that case it should ideally be associated with each root.
Transition Tracing solves this by associating a Transition with any
updates that are later collected but this suffers from the problem
mentioned above. Therefore, I just associate Transition Types with one
root - the first one to commit. Since the View Transitions across roots
are sequential anyway it kind of makes sense that only one really is the
cause and the other one is subsequent.
Transition Types can be used to apply different animations based on what
caused the Transition. You have three different ways to choose from for
how to use them:
## CSS
It integrates with [View Transition
Types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples)
so you can match different animations based on CSS scopes:
```css
:root:active-view-transition-type(my-transition-type) {
&::view-transition-...(...) {
...
}
}
```
This is kind of a PITA to write though and if you have a CSS library
that provide View Transition Classes it's difficult to import those into
these scopes.
## Class per Type
This PR also adds an object-as-map form that can be passed to all
`className` properties:
```js
<ViewTransition className={{
'my-navigation-type': 'hello',
'default': 'world',
}}>
```
If multiple types match, then they're joined together. If no types match
then the special `"default"` entry is used instead. If any type has the
value `"none"` then that wins and the ViewTransition is disabled (not
assigned a name).
These can be combined with `enter`/`exit`/`update`/`layout`/`share`
props to match based on kind of trigger and Transition Type.
```js
<ViewTransition enter={{
'navigation-back': 'enter-right',
'navigation-forward': 'enter-left',
}}
exit={{
'navigation-back': 'exit-right',
'navigation-forward': 'exit-left',
}}>
```
## Events
In addition, you can also observe the types in the View Transition Event
callbacks as the second argument. That way you can pick different
imperative Animations based on the cause.
```js
<ViewTransition onUpdate={(inst, types) => {
if (types.includes('navigation-back')) {
...
} else if (types.includes('navigation-forward')) {
...
} else {
...
}
}}>
```
## Future
In the future we might expose types to `useEffect` for more general
purpose usage. This would also allow non-View Transition based
Animations such as existing libraries to use this same feature to
coordinate the same concept.
We might also allow richer objects to be passed along here. Only the
strings would apply to View Transitions but the imperative code and
effects could do something else with them.
DiffTrain build for [028c8e6](react@028c8e6)
This adds an isomorphic API to add Transition Types, which represent the
cause, to the current Transition. This is currently mainly for View
Transitions but as a concept it's broader and we might expand it to more
features and object types in the future.
```js
import { unstable_addTransitionType as addTransitionType } from 'react';
startTransition(() => {
addTransitionType('my-transition-type');
setState(...);
});
```
If multiple transitions get entangled this is additive and all
Transition Types are collected. You can also add more than one type to a
Transition (hence the `add` prefix).
Transition Types are reset after each commit. Meaning that `<Suspense>`
revealing after a `startTransition` does not get any View Transition
types associated with it.
Note that the scoping rules for this is a little "wrong" in this
implementation. Ideally it would be scoped to the nearest outer
`startTransition` and grouped with any `setState` inside of it.
Including Actions. However, since we currently don't have AsyncContext
on the client, it would be too easy to drop a Transition Type if there
were no other `setState` in the same `await` task. Multiple Transitions
are entangled together anyway right now as a result. So this just tracks
a global of all pending Transition Types for the next Transition. An
inherent tricky bit with this API is that you could update multiple
roots. In that case it should ideally be associated with each root.
Transition Tracing solves this by associating a Transition with any
updates that are later collected but this suffers from the problem
mentioned above. Therefore, I just associate Transition Types with one
root - the first one to commit. Since the View Transitions across roots
are sequential anyway it kind of makes sense that only one really is the
cause and the other one is subsequent.
Transition Types can be used to apply different animations based on what
caused the Transition. You have three different ways to choose from for
how to use them:
## CSS
It integrates with [View Transition
Types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples)
so you can match different animations based on CSS scopes:
```css
:root:active-view-transition-type(my-transition-type) {
&::view-transition-...(...) {
...
}
}
```
This is kind of a PITA to write though and if you have a CSS library
that provide View Transition Classes it's difficult to import those into
these scopes.
## Class per Type
This PR also adds an object-as-map form that can be passed to all
`className` properties:
```js
<ViewTransition className={{
'my-navigation-type': 'hello',
'default': 'world',
}}>
```
If multiple types match, then they're joined together. If no types match
then the special `"default"` entry is used instead. If any type has the
value `"none"` then that wins and the ViewTransition is disabled (not
assigned a name).
These can be combined with `enter`/`exit`/`update`/`layout`/`share`
props to match based on kind of trigger and Transition Type.
```js
<ViewTransition enter={{
'navigation-back': 'enter-right',
'navigation-forward': 'enter-left',
}}
exit={{
'navigation-back': 'exit-right',
'navigation-forward': 'exit-left',
}}>
```
## Events
In addition, you can also observe the types in the View Transition Event
callbacks as the second argument. That way you can pick different
imperative Animations based on the cause.
```js
<ViewTransition onUpdate={(inst, types) => {
if (types.includes('navigation-back')) {
...
} else if (types.includes('navigation-forward')) {
...
} else {
...
}
}}>
```
## Future
In the future we might expose types to `useEffect` for more general
purpose usage. This would also allow non-View Transition based
Animations such as existing libraries to use this same feature to
coordinate the same concept.
We might also allow richer objects to be passed along here. Only the
strings would apply to View Transitions but the imperative code and
effects could do something else with them.
DiffTrain build for [028c8e6](react@028c8e6)
## Dependency Updates | Package | From | To | Type | | --- | --- | --- | --- | | `react` | 19.2.8 | 19.3.0 | minor | | `react-dom` | 19.2.8 | 19.3.0 | minor | ## Release Notes <details> <summary><b>react</b> (19.2.8 → 19.3.0)</summary> Below is a list of all new features, APIs, and bug fixes. Read the [React 19.3 release post](https://react.dev/blog/2026/09/09/react-19-3) for more information. ## New React Features - `<ViewTransition />`: Adds `<ViewTransition />` and `addTransitionType` APIs to power View Transition animations in React (@<!---->sebmarkbage, @<!---->jackpope, @<!---->gaearon: [#31975](react/react#31975), [#31987](react/react#31987), [#31996](react/react#31996), [#31999](react/react#31999), [#32001](react/react#32001), [#32002](react/react#32002), [#32028](react/react#32028), [#32029](react/react#32029), [#32031](react/react#32031), [#32034](react/react#32034), [#32038](react/react#32038), [#32041](react/react#32041), [#32050](react/react#32050), [#32090](react/react#32090), [#32105](react/react#32105), [#32254](react/react#32254), [#32379](react/react#32379), [#32422](react/react#32422), [#32462](react/react#32462), [#32540](react/react#32540), [#32545](react/react#32545), [#32585](react/react#32585), [#32599](react/react#32599), [#32611](react/react#32611), [#32612](react/react#32612), [#32617](react/react#32617), [#32651](react/react#32651), [#32653](react/react#32653), [#32656](react/react#32656), [#32664](https://github. …[full notes](https://github.com/react/react/releases/tag/v19.3.0) </details> <details> <summary><b>react-dom</b> (19.2.8 → 19.3.0)</summary> Below is a list of all new features, APIs, and bug fixes. Read the [React 19.3 release post](https://react.dev/blog/2026/09/09/react-19-3) for more information. ## New React Features - `<ViewTransition />`: Adds `<ViewTransition />` and `addTransitionType` APIs to power View Transition animations in React (@<!---->sebmarkbage, @<!---->jackpope, @<!---->gaearon: [#31975](react/react#31975), [#31987](react/react#31987), [#31996](react/react#31996), [#31999](react/react#31999), [#32001](react/react#32001), [#32002](react/react#32002), [#32028](react/react#32028), [#32029](react/react#32029), [#32031](react/react#32031), [#32034](react/react#32034), [#32038](react/react#32038), [#32041](react/react#32041), [#32050](react/react#32050), [#32090](react/react#32090), [#32105](react/react#32105), [#32254](react/react#32254), [#32379](react/react#32379), [#32422](react/react#32422), [#32462](react/react#32462), [#32540](react/react#32540), [#32545](react/react#32545), [#32585](react/react#32585), [#32599](react/react#32599), [#32611](react/react#32611), [#32612](react/react#32612), [#32617](react/react#32617), [#32651](react/react#32651), [#32653](react/react#32653), [#32656](react/react#32656), [#32664](https://github. …[full notes](https://github.com/react/react/releases/tag/v19.3.0) </details> --- *This PR was auto-generated by [catalog-update-action](https://github.com/brandhaug/catalog-update-action).* Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

<h3>Snyk has created this PR to upgrade react-dom from 19.2.8 to 19.3.0.</h3>
:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
<hr/>
- The recommended version is **204 versions** ahead of your current version.
- The recommended version was released **21 days ago**.
#### Breaking Change Risk

> **Notice:** This assessment is enhanced by AI.
<details>
<summary><b>Release notes</b></summary>
<br/>
<details>
<summary>Package name: <b>react-dom</b></summary>
<ul>
<li>
<b>19.3.0</b> - <a href="/web-api/iframe-proxy?url=https://redirect.github.com/react/react/releases/tag/v19.3.0">2026-09-09</a></br><p>Below is a list of all new features, APIs, and bug fixes.</p>
<p>Read the <a href="/web-api/iframe-proxy?url=https://react.dev/blog/2026/09/09/react-19-3" rel="nofollow">React 19.3 release post</a> for more information.</p>
<h2>New React Features</h2>
<ul>
<li><code><ViewTransition /></code>: Adds <code><ViewTransition /></code> and <code>addTransitionType</code> APIs to power View Transition animations in React (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jackpope/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jackpope">@ jackpope</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaearon">@ gaearon</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31975" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31975/hovercard">#31975</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31987" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31987/hovercard">#31987</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31996" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31996/hovercard">#31996</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31999" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31999/hovercard">#31999</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32001" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32001/hovercard">#32001</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32002" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32002/hovercard">#32002</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32028" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32028/hovercard">#32028</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32029" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32029/hovercard">#32029</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32031" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32031/hovercard">#32031</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32034" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32034/hovercard">#32034</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32038" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32038/hovercard">#32038</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32041" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32041/hovercard">#32041</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32050" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32050/hovercard">#32050</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32090" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32090/hovercard">#32090</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32105" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32105/hovercard">#32105</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32254" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32254/hovercard">#32254</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32379" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32379/hovercard">#32379</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32422" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32422/hovercard">#32422</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32462" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32462/hovercard">#32462</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32540" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32540/hovercard">#32540</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32545" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32545/hovercard">#32545</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32585" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32585/hovercard">#32585</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32599" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32599/hovercard">#32599</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32611" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32611/hovercard">#32611</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32612" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32612/hovercard">#32612</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32617" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32617/hovercard">#32617</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32651" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32651/hovercard">#32651</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32653" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32653/hovercard">#32653</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32656" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32656/hovercard">#32656</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32664" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32664/hovercard">#32664</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32699" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32699/hovercard">#32699</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32723" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32723/hovercard">#32723</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32734" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32734/hovercard">#32734</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32751" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32751/hovercard">#32751</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32752" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32752/hovercard">#32752</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32760" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32760/hovercard">#32760</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32761" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32761/hovercard">#32761</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32764" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32764/hovercard">#32764</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32772" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32772/hovercard">#32772</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32790" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32790/hovercard">#32790</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32819" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32819/hovercard">#32819</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32820" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32820/hovercard">#32820</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32822" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32822/hovercard">#32822</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32833" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32833/hovercard">#32833</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32849" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32849/hovercard">#32849</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33094" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33094/hovercard">#33094</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33191" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33191/hovercard">#33191</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33200" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33200/hovercard">#33200</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33206" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33206/hovercard">#33206</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33293" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33293/hovercard">#33293</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33330" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33330/hovercard">#33330</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33331" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33331/hovercard">#33331</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33332" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33332/hovercard">#33332</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33357" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33357/hovercard">#33357</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33362" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33362/hovercard">#33362</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33433" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33433/hovercard">#33433</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33576" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33576/hovercard">#33576</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34374" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34374/hovercard">#34374</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34450" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34450/hovercard">#34450</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34481" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34481/hovercard">#34481</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34500" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34500/hovercard">#34500</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34502" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34502/hovercard">#34502</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34510" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34510/hovercard">#34510</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34511" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34511/hovercard">#34511</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34539" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34539/hovercard">#34539</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35567" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35567/hovercard">#35567</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35564" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35564/hovercard">#35564</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35485" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35485/hovercard">#35485</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35380" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35380/hovercard">#35380</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35063" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35063/hovercard">#35063</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35060" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35060/hovercard">#35060</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34676" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34676/hovercard">#34676</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36917" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36917/hovercard">#36917</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35337" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35337/hovercard">#35337</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35520" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35520/hovercard">#35520</a>)</li>
<li>Fragment Refs: Add Refs to <code><Fragment /></code> to support composable platform behavior (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jackpope/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jackpope">@ jackpope</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Dhakshin2007/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/Dhakshin2007">@ Dhakshin2007</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chirokas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/chirokas">@ chirokas</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/teamleaderleo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/teamleaderleo">@ teamleaderleo</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fallintoplace/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/fallintoplace">@ fallintoplace</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32465" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32465/hovercard">#32465</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32613" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32613/hovercard">#32613</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32619" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32619/hovercard">#32619</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32654" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32654/hovercard">#32654</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32660" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32660/hovercard">#32660</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32682" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32682/hovercard">#32682</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32722" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32722/hovercard">#32722</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32813" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32813/hovercard">#32813</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32814" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32814/hovercard">#32814</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33056" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33056/hovercard">#33056</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33058" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33058/hovercard">#33058</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33093" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33093/hovercard">#33093</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34069" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34069/hovercard">#34069</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34103" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34103/hovercard">#34103</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34544" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34544/hovercard">#34544</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34545" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34545/hovercard">#34545</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37062" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37062/hovercard">#37062</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37061" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37061/hovercard">#37061</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37060" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37060/hovercard">#37060</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36047" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36047/hovercard">#36047</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36010" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36010/hovercard">#36010</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35642" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35642/hovercard">#35642</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35641" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35641/hovercard">#35641</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35637" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35637/hovercard">#35637</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35630" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35630/hovercard">#35630</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34935" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34935/hovercard">#34935</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37457" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37457/hovercard">#37457</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37408" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37408/hovercard">#37408</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37326" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37326/hovercard">#37326</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37251" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37251/hovercard">#37251</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37171" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37171/hovercard">#37171</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37169" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37169/hovercard">#37169</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37168" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37168/hovercard">#37168</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37167" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37167/hovercard">#37167</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37166" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37166/hovercard">#37166</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37165" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37165/hovercard">#37165</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37164" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37164/hovercard">#37164</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37163" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37163/hovercard">#37163</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37162" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37162/hovercard">#37162</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37161" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37161/hovercard">#37161</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37160" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37160/hovercard">#37160</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37125" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37125/hovercard">#37125</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37063" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37063/hovercard">#37063</a>)</li>
</ul>
<h2>New React DOM Features</h2>
<ul>
<li><code>browser()</code>: a new <code>react-dom</code> API that returns a usable which errors during server rendering and resolves in the browser. <code>use(browser())</code> inside a <code><Suspense></code> boundary marks a subtree as browser-only without reporting a recoverable error (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37143" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37143/hovercard">#37143</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37241" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37241/hovercard">#37241</a>)
<ul>
<li>Added an <code>onBrowserBailout</code> option to the <code>react-dom/server</code> APIs to observe when a subtree defers to the browser (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37193" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37193/hovercard">#37193</a>)</li>
</ul>
</li>
</ul>
<h2>Notable changes</h2>
<ul>
<li>Enable Trusted Types API integration (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rickhanlonii/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/rickhanlonii">@ rickhanlonii</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35816" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35816/hovercard">#35816</a>)</li>
<li>Transitions now render independently instead of being entangled into a single render, so a slow transition no longer holds up unrelated ones (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37290" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37290/hovercard">#37290</a>)</li>
<li>Added a DEV-only warning when a component appears to have been unblocked by calling <code>use()</code> conditionally (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37104" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37104/hovercard">#37104</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37203" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37203/hovercard">#37203</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37491" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37491/hovercard">#37491</a>)</li>
</ul>
<h2>All Changes</h2>
<h3>React</h3>
<ul>
<li>Fast Refresh Fixes
<ul>
<li>Fix Fast Refresh to find and remount edits to components wrapped behind <code>lazy()</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36965" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36965/hovercard">#36965</a>)</li>
<li>Fix Fast Refresh so edits to a <code>memo()</code> comparison function take effect (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36964" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36964/hovercard">#36964</a>)</li>
<li>Fix Fast Refresh crash when an edit changes the kind of a component's type (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36963" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36963/hovercard">#36963</a>)</li>
<li>Unify hot reload type resolution for Fast Refresh (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36962" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36962/hovercard">#36962</a>)</li>
<li>Fix Fast Refresh to remount correctly when an edit changes the component kind (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36950" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36950/hovercard">#36950</a>)</li>
<li>Double invoke effects in StrictMode after Fast Refresh (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35962" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35962/hovercard">#35962</a>)</li>
</ul>
</li>
<li>Performance Track Fixes
<ul>
<li>Prevent crash when accessing <code>$$typeof</code> in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35679" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35679/hovercard">#35679</a>)</li>
<li>Handle non-string function names in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35659" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35659/hovercard">#35659</a>)</li>
<li>Use minus (<code>-</code>) instead of en dash for removed props in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35649" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35649/hovercard">#35649</a>)</li>
<li>Handle arrays with bigints in deep objects in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35648" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35648/hovercard">#35648</a>)</li>
<li>Don't enumerate typed array props in Performance Tracks in DEV (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/UditDewan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/UditDewan">@ UditDewan</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36913" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36913/hovercard">#36913</a>)</li>
<li>Bail out of diffing wide objects and arrays in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34742" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34742/hovercard">#34742</a>)</li>
<li>Clear potentially large performance measures in DEV (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34803" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34803/hovercard">#34803</a>)</li>
<li>Fix missing else branch for renders with no props change in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34837" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34837/hovercard">#34837</a>)</li>
</ul>
</li>
<li>Activity Fixes
<ul>
<li>Fix <code>useSyncExternalStore</code> missing store mutations that happened while an Activity tree was hidden (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36947" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36947/hovercard">#36947</a>)</li>
<li>Hide portal contents when an Activity is hidden (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35091" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35091/hovercard">#35091</a>)</li>
<li>Prevent metadata hoisting in hidden <code><Activity></code> trees (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ronnakamoto/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/ronnakamoto">@ ronnakamoto</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34983" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34983/hovercard">#34983</a>)</li>
<li>Prevent errors thrown inside a hidden Activity from escaping to the visible UI (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35074" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35074/hovercard">#35074</a>)</li>
<li>Don't unhide a node if a direct parent Offscreen is still hidden (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34821" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34821/hovercard">#34821</a>)</li>
<li>Don't show internal <code><Offscreen></code> component in error messages (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rickhanlonii/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/rickhanlonii">@ rickhanlonii</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35763" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35763/hovercard">#35763</a>)</li>
</ul>
</li>
<li>Warn in DEV when a component appears to have been unblocked by a conditional <code>use()</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37104" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37104/hovercard">#37104</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37203" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37203/hovercard">#37203</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37491" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37491/hovercard">#37491</a>)</li>
<li>Render transitions independently instead of entangling them into a single render (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37290" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37290/hovercard">#37290</a>)</li>
<li>Fix hang when updating a dehydrated boundary inside a hidden tree (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaearon">@ gaearon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37135" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37135/hovercard">#37135</a>)</li>
<li>Don't reacquire Host Singletons during dev effect validation (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37113" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37113/hovercard">#37113</a>)</li>
<li>Only remove properties from Host Singletons on release (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37112" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37112/hovercard">#37112</a>)</li>
<li>Don't invoke effects on moved children in StrictMode (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36948" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36948/hovercard">#36948</a>)</li>
<li>Throw a clearer error when a rejected Promise is incorrectly instrumented (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36328" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36328/hovercard">#36328</a>)</li>
<li>Fix context propagation into Suspense fallbacks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36160" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36160/hovercard">#36160</a>)</li>
<li>Fix context propagation through suspended Suspense boundaries (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35839" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35839/hovercard">#35839</a>)</li>
<li>Fix <code>useDeferredValue</code> getting stuck (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaearon">@ gaearon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36134" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36134/hovercard">#36134</a>)</li>
<li>Update <code>useActionState</code> error message to say "action state" instead of "form state" (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rickhanlonii/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/rickhanlonii">@ rickhanlonii</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35790" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35790/hovercard">#35790</a>)</li>
<li>Don't warn when rendering data block scripts (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35953" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35953/hovercard">#35953</a>)</li>
<li>Treat fibers with alternates as mounted in <code>getNearestMountedFiber</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35578" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35578/hovercard">#35578</a>)</li>
<li>Always instrument the lazy initializer thenable (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35521" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35521/hovercard">#35521</a>)</li>
<li>Annotate cascading updates for DevTools performance tracks in DEV (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huntie/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/huntie">@ huntie</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34961" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34961/hovercard">#34961</a>)</li>
<li>Resolve the <code>.default</code> export of a <code>React.lazy</code> as the canonical value (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34906" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34906/hovercard">#34906</a>)</li>
<li>Limit owner stacks to 10 frames (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34864" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34864/hovercard">#34864</a>)</li>
<li>Ensure <code>useEffectEvent</code> reads latest values in <code>forwardRef</code> and <code>memo()</code> components (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34831" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34831/hovercard">#34831</a>)</li>
</ul>
<h3>React DOM</h3>
<ul>
<li>Copy <code>source</code> onto the synthetic <code>toggle</code> event (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/lazerg/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/lazerg">@ lazerg</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37389" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37389/hovercard">#37389</a>)</li>
<li>Update HTML parser rules for the new <code><select></code> parser (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/josepharhar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/josepharhar">@ josepharhar</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34804" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34804/hovercard">#34804</a>)</li>
<li>Update <code>defaultValue</code> for <code>type="number"</code> inputs to match other input types (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36980" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36980/hovercard">#36980</a>)</li>
<li>Avoid setting <code>innerHTML</code> when it hasn't changed (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36949" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36949/hovercard">#36949</a>)</li>
<li>Forward the <code>nonce</code> option in <code>ReactDOM.preloadModule()</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/UditDewan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/UditDewan">@ UditDewan</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36851" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36851/hovercard">#36851</a>)</li>
<li>Support <code>fetchPriority</code> for module resources (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/TheAlexLichter/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/TheAlexLichter">@ TheAlexLichter</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36835" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36835/hovercard">#36835</a>)</li>
<li>Track stylesheet preloads when explicitly preloaded to avoid unnecessary suspension (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36386" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36386/hovercard">#36386</a>)</li>
<li>Suggest correct casing for the misspelled <code>credentialless</code> iframe attribute (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vmx906/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/vmx906">@ vmx906</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36322" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36322/hovercard">#36322</a>)</li>
<li>Add <code>credentialless</code> as a recognized boolean attribute for iframes (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vmx906/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/vmx906">@ vmx906</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36148" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36148/hovercard">#36148</a>)</li>
<li>Prevent reentrant <code>finishedTask</code> from calling <code>completeAll</code> multiple times (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36287" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36287/hovercard">#36287</a>)</li>
<li>Update the CSS shorthand property list (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kidonng/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/kidonng">@ kidonng</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35636" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35636/hovercard">#35636</a>)</li>
<li>Support the <code>maskType</code> SVG prop (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sleitor/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sleitor">@ sleitor</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35921" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35921/hovercard">#35921</a>)</li>
<li>Add support for <code>onFullscreenChange</code> and <code>onFullscreenError</code> events (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chirokas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/chirokas">@ chirokas</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34621" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34621/hovercard">#34621</a>)</li>
<li>Include <code>submitter</code> in <code>submit</code> events (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35590" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35590/hovercard">#35590</a>)</li>
<li>Fire <code>onReset</code> when automatically resetting forms (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35176" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35176/hovercard">#35176</a>)</li>
<li>Use the <code>FormData</code> <code>submitter</code> parameter (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jenseng/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jenseng">@ jenseng</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/29028" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/29028/hovercard">#29028</a>)</li>
<li>Fix form status reset when component state is updated (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34075" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34075/hovercard">#34075</a>)</li>
<li>Batch updates from <code>resize</code> events until the next frame (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35117" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35117/hovercard">#35117</a>)</li>
</ul>
<h3>React Server</h3>
<ul>
<li>Add <code>nonce</code> to rendered import maps (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mattcosta7/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/mattcosta7">@ mattcosta7</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37339" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37339/hovercard">#37339</a>)</li>
<li>Add an <code>onBrowserBailout</code> option to observe subtrees that defer to the browser (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37193" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37193/hovercard">#37193</a>)</li>
<li>Stop the caller's signal from retaining a finished render (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/unstubbable/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/unstubbable">@ unstubbable</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37315" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37315/hovercard">#37315</a>)</li>
<li>Construct the render lifetime controller only when it is needed (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/unstubbable/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/unstubbable">@ unstubbable</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37357" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37357/hovercard">#37357</a>)</li>
<li>Fix <code>react-dom/server</code> hanging on Deno (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fraidev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/fraidev">@ fraidev</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35235" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35235/hovercard">#35235</a>)</li>
<li>Extend stack overflow recovery to retries in SSR (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jackpope/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jackpope">@ jackpope</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36977" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36977/hovercard">#36977</a>)</li>
<li>Fix false-positive hydration mismatch on <code>nonce</code> attributes (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/MaxwellCohen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/MaxwellCohen">@ MaxwellCohen</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37030" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37030/hovercard">#37030</a>)</li>
<li>Guard shell-error callbacks instead of nulling them out on the request (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36916" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36916/hovercard">#36916</a>)</li>
<li>Stop firing <code>onAllReady</code> after the shell errored (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36903" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36903/hovercard">#36903</a>)</li>
<li>Treat an incomplete tree as an error during error recovery (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36911" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36911/hovercard">#36911</a>)</li>
<li>Fix non-script <code>modulepreload</code> tracking (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fallintoplace/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/fallintoplace">@ fallintoplace</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36564" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36564/hovercard">#36564</a>)</li>
<li>Finalize postponed <code>nextSegmentId</code> after the prelude flush (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaojude/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaojude">@ gaojude</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36779" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36779/hovercard">#36779</a>)</li>
<li>Preserve <code>referrerPolicy</code> in image preload headers (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ulises-jeremias/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/ulises-jeremias">@ ulises-jeremias</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36803" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36803/hovercard">#36803</a>)</li>
<li>Allow pending work to specialize abort reasons (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36586" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36586/hovercard">#36586</a>)</li>
<li>Abort tasks that suspend after aborting during render (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36585" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36585/hovercard">#36585</a>)</li>
<li>Finish abort in a scheduled task (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36580" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36580/hovercard">#36580</a>)</li>
<li>Fix aborts during resumed rendering (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36584" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36584/hovercard">#36584</a>)</li>
<li>Track abort state on the request (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36583" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36583/hovercard">#36583</a>)</li>
<li>Model external work scheduling explicitly in the fb bundle (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36576" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36576/hovercard">#36576</a>)</li>
<li>Continue reporting aborted task errors after a fatal abort (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36575" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36575/hovercard">#36575</a>)</li>
<li>Disallow abort reentrancy (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36574" data-hove…

<h3>Snyk has created this PR to upgrade react-dom from 19.2.8 to 19.3.0.</h3>
:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
<hr/>
- The recommended version is **204 versions** ahead of your current version.
- The recommended version was released **22 days ago**.
#### Breaking Change Risk

> **Notice:** This assessment is enhanced by AI.
<details>
<summary><b>Release notes</b></summary>
<br/>
<details>
<summary>Package name: <b>react-dom</b></summary>
<ul>
<li>
<b>19.3.0</b> - <a href="/web-api/iframe-proxy?url=https://redirect.github.com/react/react/releases/tag/v19.3.0">2026-09-09</a></br><p>Below is a list of all new features, APIs, and bug fixes.</p>
<p>Read the <a href="/web-api/iframe-proxy?url=https://react.dev/blog/2026/09/09/react-19-3" rel="nofollow">React 19.3 release post</a> for more information.</p>
<h2>New React Features</h2>
<ul>
<li><code><ViewTransition /></code>: Adds <code><ViewTransition /></code> and <code>addTransitionType</code> APIs to power View Transition animations in React (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jackpope/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jackpope">@ jackpope</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaearon">@ gaearon</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31975" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31975/hovercard">#31975</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31987" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31987/hovercard">#31987</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31996" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31996/hovercard">#31996</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/31999" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/31999/hovercard">#31999</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32001" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32001/hovercard">#32001</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32002" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32002/hovercard">#32002</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32028" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32028/hovercard">#32028</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32029" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32029/hovercard">#32029</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32031" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32031/hovercard">#32031</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32034" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32034/hovercard">#32034</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32038" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32038/hovercard">#32038</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32041" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32041/hovercard">#32041</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32050" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32050/hovercard">#32050</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32090" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32090/hovercard">#32090</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32105" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32105/hovercard">#32105</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32254" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32254/hovercard">#32254</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32379" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32379/hovercard">#32379</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32422" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32422/hovercard">#32422</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32462" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32462/hovercard">#32462</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32540" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32540/hovercard">#32540</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32545" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32545/hovercard">#32545</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32585" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32585/hovercard">#32585</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32599" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32599/hovercard">#32599</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32611" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32611/hovercard">#32611</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32612" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32612/hovercard">#32612</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32617" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32617/hovercard">#32617</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32651" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32651/hovercard">#32651</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32653" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32653/hovercard">#32653</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32656" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32656/hovercard">#32656</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32664" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32664/hovercard">#32664</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32699" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32699/hovercard">#32699</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32723" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32723/hovercard">#32723</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32734" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32734/hovercard">#32734</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32751" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32751/hovercard">#32751</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32752" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32752/hovercard">#32752</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32760" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32760/hovercard">#32760</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32761" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32761/hovercard">#32761</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32764" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32764/hovercard">#32764</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32772" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32772/hovercard">#32772</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32790" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32790/hovercard">#32790</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32819" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32819/hovercard">#32819</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32820" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32820/hovercard">#32820</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32822" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32822/hovercard">#32822</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32833" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32833/hovercard">#32833</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32849" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32849/hovercard">#32849</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33094" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33094/hovercard">#33094</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33191" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33191/hovercard">#33191</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33200" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33200/hovercard">#33200</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33206" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33206/hovercard">#33206</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33293" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33293/hovercard">#33293</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33330" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33330/hovercard">#33330</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33331" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33331/hovercard">#33331</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33332" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33332/hovercard">#33332</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33357" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33357/hovercard">#33357</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33362" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33362/hovercard">#33362</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33433" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33433/hovercard">#33433</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33576" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33576/hovercard">#33576</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34374" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34374/hovercard">#34374</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34450" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34450/hovercard">#34450</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34481" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34481/hovercard">#34481</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34500" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34500/hovercard">#34500</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34502" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34502/hovercard">#34502</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34510" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34510/hovercard">#34510</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34511" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34511/hovercard">#34511</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34539" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34539/hovercard">#34539</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35567" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35567/hovercard">#35567</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35564" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35564/hovercard">#35564</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35485" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35485/hovercard">#35485</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35380" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35380/hovercard">#35380</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35063" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35063/hovercard">#35063</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35060" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35060/hovercard">#35060</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34676" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34676/hovercard">#34676</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36917" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36917/hovercard">#36917</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35337" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35337/hovercard">#35337</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35520" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35520/hovercard">#35520</a>)</li>
<li>Fragment Refs: Add Refs to <code><Fragment /></code> to support composable platform behavior (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jackpope/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jackpope">@ jackpope</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Dhakshin2007/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/Dhakshin2007">@ Dhakshin2007</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chirokas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/chirokas">@ chirokas</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/teamleaderleo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/teamleaderleo">@ teamleaderleo</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fallintoplace/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/fallintoplace">@ fallintoplace</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32465" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32465/hovercard">#32465</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32613" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32613/hovercard">#32613</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32619" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32619/hovercard">#32619</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32654" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32654/hovercard">#32654</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32660" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32660/hovercard">#32660</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32682" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32682/hovercard">#32682</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32722" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32722/hovercard">#32722</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32813" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32813/hovercard">#32813</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/32814" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/32814/hovercard">#32814</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33056" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33056/hovercard">#33056</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33058" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33058/hovercard">#33058</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/33093" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/33093/hovercard">#33093</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34069" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34069/hovercard">#34069</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34103" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34103/hovercard">#34103</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34544" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34544/hovercard">#34544</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34545" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34545/hovercard">#34545</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37062" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37062/hovercard">#37062</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37061" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37061/hovercard">#37061</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37060" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37060/hovercard">#37060</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36047" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36047/hovercard">#36047</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36010" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36010/hovercard">#36010</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35642" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35642/hovercard">#35642</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35641" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35641/hovercard">#35641</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35637" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35637/hovercard">#35637</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35630" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35630/hovercard">#35630</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34935" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34935/hovercard">#34935</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37457" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37457/hovercard">#37457</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37408" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37408/hovercard">#37408</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37326" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37326/hovercard">#37326</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37251" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37251/hovercard">#37251</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37171" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37171/hovercard">#37171</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37169" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37169/hovercard">#37169</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37168" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37168/hovercard">#37168</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37167" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37167/hovercard">#37167</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37166" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37166/hovercard">#37166</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37165" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37165/hovercard">#37165</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37164" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37164/hovercard">#37164</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37163" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37163/hovercard">#37163</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37162" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37162/hovercard">#37162</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37161" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37161/hovercard">#37161</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37160" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37160/hovercard">#37160</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37125" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37125/hovercard">#37125</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37063" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37063/hovercard">#37063</a>)</li>
</ul>
<h2>New React DOM Features</h2>
<ul>
<li><code>browser()</code>: a new <code>react-dom</code> API that returns a usable which errors during server rendering and resolves in the browser. <code>use(browser())</code> inside a <code><Suspense></code> boundary marks a subtree as browser-only without reporting a recoverable error (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37143" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37143/hovercard">#37143</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37241" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37241/hovercard">#37241</a>)
<ul>
<li>Added an <code>onBrowserBailout</code> option to the <code>react-dom/server</code> APIs to observe when a subtree defers to the browser (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37193" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37193/hovercard">#37193</a>)</li>
</ul>
</li>
</ul>
<h2>Notable changes</h2>
<ul>
<li>Enable Trusted Types API integration (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rickhanlonii/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/rickhanlonii">@ rickhanlonii</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35816" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35816/hovercard">#35816</a>)</li>
<li>Transitions now render independently instead of being entangled into a single render, so a slow transition no longer holds up unrelated ones (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37290" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37290/hovercard">#37290</a>)</li>
<li>Added a DEV-only warning when a component appears to have been unblocked by calling <code>use()</code> conditionally (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37104" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37104/hovercard">#37104</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37203" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37203/hovercard">#37203</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37491" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37491/hovercard">#37491</a>)</li>
</ul>
<h2>All Changes</h2>
<h3>React</h3>
<ul>
<li>Fast Refresh Fixes
<ul>
<li>Fix Fast Refresh to find and remount edits to components wrapped behind <code>lazy()</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36965" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36965/hovercard">#36965</a>)</li>
<li>Fix Fast Refresh so edits to a <code>memo()</code> comparison function take effect (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36964" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36964/hovercard">#36964</a>)</li>
<li>Fix Fast Refresh crash when an edit changes the kind of a component's type (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36963" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36963/hovercard">#36963</a>)</li>
<li>Unify hot reload type resolution for Fast Refresh (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36962" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36962/hovercard">#36962</a>)</li>
<li>Fix Fast Refresh to remount correctly when an edit changes the component kind (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36950" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36950/hovercard">#36950</a>)</li>
<li>Double invoke effects in StrictMode after Fast Refresh (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35962" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35962/hovercard">#35962</a>)</li>
</ul>
</li>
<li>Performance Track Fixes
<ul>
<li>Prevent crash when accessing <code>$$typeof</code> in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35679" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35679/hovercard">#35679</a>)</li>
<li>Handle non-string function names in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35659" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35659/hovercard">#35659</a>)</li>
<li>Use minus (<code>-</code>) instead of en dash for removed props in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35649" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35649/hovercard">#35649</a>)</li>
<li>Handle arrays with bigints in deep objects in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35648" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35648/hovercard">#35648</a>)</li>
<li>Don't enumerate typed array props in Performance Tracks in DEV (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/UditDewan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/UditDewan">@ UditDewan</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36913" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36913/hovercard">#36913</a>)</li>
<li>Bail out of diffing wide objects and arrays in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34742" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34742/hovercard">#34742</a>)</li>
<li>Clear potentially large performance measures in DEV (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34803" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34803/hovercard">#34803</a>)</li>
<li>Fix missing else branch for renders with no props change in Performance Tracks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34837" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34837/hovercard">#34837</a>)</li>
</ul>
</li>
<li>Activity Fixes
<ul>
<li>Fix <code>useSyncExternalStore</code> missing store mutations that happened while an Activity tree was hidden (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36947" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36947/hovercard">#36947</a>)</li>
<li>Hide portal contents when an Activity is hidden (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35091" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35091/hovercard">#35091</a>)</li>
<li>Prevent metadata hoisting in hidden <code><Activity></code> trees (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ronnakamoto/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/ronnakamoto">@ ronnakamoto</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34983" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34983/hovercard">#34983</a>)</li>
<li>Prevent errors thrown inside a hidden Activity from escaping to the visible UI (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35074" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35074/hovercard">#35074</a>)</li>
<li>Don't unhide a node if a direct parent Offscreen is still hidden (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34821" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34821/hovercard">#34821</a>)</li>
<li>Don't show internal <code><Offscreen></code> component in error messages (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rickhanlonii/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/rickhanlonii">@ rickhanlonii</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35763" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35763/hovercard">#35763</a>)</li>
</ul>
</li>
<li>Warn in DEV when a component appears to have been unblocked by a conditional <code>use()</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hoxyq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/hoxyq">@ hoxyq</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a>: <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37104" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37104/hovercard">#37104</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37203" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37203/hovercard">#37203</a>, <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37491" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37491/hovercard">#37491</a>)</li>
<li>Render transitions independently instead of entangling them into a single render (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37290" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37290/hovercard">#37290</a>)</li>
<li>Fix hang when updating a dehydrated boundary inside a hidden tree (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaearon">@ gaearon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37135" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37135/hovercard">#37135</a>)</li>
<li>Don't reacquire Host Singletons during dev effect validation (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37113" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37113/hovercard">#37113</a>)</li>
<li>Only remove properties from Host Singletons on release (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37112" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37112/hovercard">#37112</a>)</li>
<li>Don't invoke effects on moved children in StrictMode (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36948" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36948/hovercard">#36948</a>)</li>
<li>Throw a clearer error when a rejected Promise is incorrectly instrumented (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36328" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36328/hovercard">#36328</a>)</li>
<li>Fix context propagation into Suspense fallbacks (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36160" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36160/hovercard">#36160</a>)</li>
<li>Fix context propagation through suspended Suspense boundaries (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35839" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35839/hovercard">#35839</a>)</li>
<li>Fix <code>useDeferredValue</code> getting stuck (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaearon">@ gaearon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36134" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36134/hovercard">#36134</a>)</li>
<li>Update <code>useActionState</code> error message to say "action state" instead of "form state" (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rickhanlonii/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/rickhanlonii">@ rickhanlonii</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35790" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35790/hovercard">#35790</a>)</li>
<li>Don't warn when rendering data block scripts (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35953" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35953/hovercard">#35953</a>)</li>
<li>Treat fibers with alternates as mounted in <code>getNearestMountedFiber</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35578" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35578/hovercard">#35578</a>)</li>
<li>Always instrument the lazy initializer thenable (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35521" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35521/hovercard">#35521</a>)</li>
<li>Annotate cascading updates for DevTools performance tracks in DEV (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huntie/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/huntie">@ huntie</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34961" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34961/hovercard">#34961</a>)</li>
<li>Resolve the <code>.default</code> export of a <code>React.lazy</code> as the canonical value (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34906" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34906/hovercard">#34906</a>)</li>
<li>Limit owner stacks to 10 frames (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34864" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34864/hovercard">#34864</a>)</li>
<li>Ensure <code>useEffectEvent</code> reads latest values in <code>forwardRef</code> and <code>memo()</code> components (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34831" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34831/hovercard">#34831</a>)</li>
</ul>
<h3>React DOM</h3>
<ul>
<li>Copy <code>source</code> onto the synthetic <code>toggle</code> event (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/lazerg/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/lazerg">@ lazerg</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37389" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37389/hovercard">#37389</a>)</li>
<li>Update HTML parser rules for the new <code><select></code> parser (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/josepharhar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/josepharhar">@ josepharhar</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34804" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34804/hovercard">#34804</a>)</li>
<li>Update <code>defaultValue</code> for <code>type="number"</code> inputs to match other input types (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36980" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36980/hovercard">#36980</a>)</li>
<li>Avoid setting <code>innerHTML</code> when it hasn't changed (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sophiebits/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sophiebits">@ sophiebits</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36949" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36949/hovercard">#36949</a>)</li>
<li>Forward the <code>nonce</code> option in <code>ReactDOM.preloadModule()</code> (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/UditDewan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/UditDewan">@ UditDewan</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36851" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36851/hovercard">#36851</a>)</li>
<li>Support <code>fetchPriority</code> for module resources (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/TheAlexLichter/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/TheAlexLichter">@ TheAlexLichter</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36835" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36835/hovercard">#36835</a>)</li>
<li>Track stylesheet preloads when explicitly preloaded to avoid unnecessary suspension (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36386" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36386/hovercard">#36386</a>)</li>
<li>Suggest correct casing for the misspelled <code>credentialless</code> iframe attribute (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vmx906/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/vmx906">@ vmx906</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36322" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36322/hovercard">#36322</a>)</li>
<li>Add <code>credentialless</code> as a recognized boolean attribute for iframes (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vmx906/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/vmx906">@ vmx906</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36148" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36148/hovercard">#36148</a>)</li>
<li>Prevent reentrant <code>finishedTask</code> from calling <code>completeAll</code> multiple times (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36287" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36287/hovercard">#36287</a>)</li>
<li>Update the CSS shorthand property list (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kidonng/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/kidonng">@ kidonng</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35636" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35636/hovercard">#35636</a>)</li>
<li>Support the <code>maskType</code> SVG prop (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sleitor/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/sleitor">@ sleitor</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35921" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35921/hovercard">#35921</a>)</li>
<li>Add support for <code>onFullscreenChange</code> and <code>onFullscreenError</code> events (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chirokas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/chirokas">@ chirokas</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34621" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34621/hovercard">#34621</a>)</li>
<li>Include <code>submitter</code> in <code>submit</code> events (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35590" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35590/hovercard">#35590</a>)</li>
<li>Fire <code>onReset</code> when automatically resetting forms (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35176" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35176/hovercard">#35176</a>)</li>
<li>Use the <code>FormData</code> <code>submitter</code> parameter (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jenseng/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jenseng">@ jenseng</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/29028" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/29028/hovercard">#29028</a>)</li>
<li>Fix form status reset when component state is updated (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/34075" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/34075/hovercard">#34075</a>)</li>
<li>Batch updates from <code>resize</code> events until the next frame (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35117" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35117/hovercard">#35117</a>)</li>
</ul>
<h3>React Server</h3>
<ul>
<li>Add <code>nonce</code> to rendered import maps (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mattcosta7/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/mattcosta7">@ mattcosta7</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37339" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37339/hovercard">#37339</a>)</li>
<li>Add an <code>onBrowserBailout</code> option to observe subtrees that defer to the browser (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37193" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37193/hovercard">#37193</a>)</li>
<li>Stop the caller's signal from retaining a finished render (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/unstubbable/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/unstubbable">@ unstubbable</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37315" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37315/hovercard">#37315</a>)</li>
<li>Construct the render lifetime controller only when it is needed (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/unstubbable/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/unstubbable">@ unstubbable</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37357" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37357/hovercard">#37357</a>)</li>
<li>Fix <code>react-dom/server</code> hanging on Deno (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fraidev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/fraidev">@ fraidev</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/35235" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/35235/hovercard">#35235</a>)</li>
<li>Extend stack overflow recovery to retries in SSR (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jackpope/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/jackpope">@ jackpope</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36977" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36977/hovercard">#36977</a>)</li>
<li>Fix false-positive hydration mismatch on <code>nonce</code> attributes (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/MaxwellCohen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/MaxwellCohen">@ MaxwellCohen</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/37030" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/37030/hovercard">#37030</a>)</li>
<li>Guard shell-error callbacks instead of nulling them out on the request (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36916" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36916/hovercard">#36916</a>)</li>
<li>Stop firing <code>onAllReady</code> after the shell errored (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/eps1lon">@ eps1lon</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36903" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36903/hovercard">#36903</a>)</li>
<li>Treat an incomplete tree as an error during error recovery (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/acdlite">@ acdlite</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36911" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36911/hovercard">#36911</a>)</li>
<li>Fix non-script <code>modulepreload</code> tracking (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fallintoplace/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/fallintoplace">@ fallintoplace</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36564" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36564/hovercard">#36564</a>)</li>
<li>Finalize postponed <code>nextSegmentId</code> after the prelude flush (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaojude/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gaojude">@ gaojude</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36779" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36779/hovercard">#36779</a>)</li>
<li>Preserve <code>referrerPolicy</code> in image preload headers (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ulises-jeremias/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/ulises-jeremias">@ ulises-jeremias</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36803" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36803/hovercard">#36803</a>)</li>
<li>Allow pending work to specialize abort reasons (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36586" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36586/hovercard">#36586</a>)</li>
<li>Abort tasks that suspend after aborting during render (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36585" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36585/hovercard">#36585</a>)</li>
<li>Finish abort in a scheduled task (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36580" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36580/hovercard">#36580</a>)</li>
<li>Fix aborts during resumed rendering (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36584" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36584/hovercard">#36584</a>)</li>
<li>Track abort state on the request (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36583" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36583/hovercard">#36583</a>)</li>
<li>Model external work scheduling explicitly in the fb bundle (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36576" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36576/hovercard">#36576</a>)</li>
<li>Continue reporting aborted task errors after a fatal abort (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36575" data-hovercard-type="pull_request" data-hovercard-url="/react/react/pull/36575/hovercard">#36575</a>)</li>
<li>Disallow abort reentrancy (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/web-api/iframe-proxy?url=https://redirect.github.com/gnoff">@ gnoff</a> <a href="/web-api/iframe-proxy?url=https://redirect.github.com/facebook/react/pull/36574" data-hove…
This adds an isomorphic API to add Transition Types, which represent the cause, to the current Transition. This is currently mainly for View Transitions but as a concept it's broader and we might expand it to more features and object types in the future.
If multiple transitions get entangled this is additive and all Transition Types are collected. You can also add more than one type to a Transition (hence the
addprefix).Transition Types are reset after each commit. Meaning that
<Suspense>revealing after astartTransitiondoes not get any View Transition types associated with it.Note that the scoping rules for this is a little "wrong" in this implementation. Ideally it would be scoped to the nearest outer
startTransitionand grouped with anysetStateinside of it. Including Actions. However, since we currently don't have AsyncContext on the client, it would be too easy to drop a Transition Type if there were no othersetStatein the sameawaittask. Multiple Transitions are entangled together anyway right now as a result. So this just tracks a global of all pending Transition Types for the next Transition. An inherent tricky bit with this API is that you could update multiple roots. In that case it should ideally be associated with each root. Transition Tracing solves this by associating a Transition with any updates that are later collected but this suffers from the problem mentioned above. Therefore, I just associate Transition Types with one root - the first one to commit. Since the View Transitions across roots are sequential anyway it kind of makes sense that only one really is the cause and the other one is subsequent.Transition Types can be used to apply different animations based on what caused the Transition. You have three different ways to choose from for how to use them:
CSS
It integrates with View Transition Types so you can match different animations based on CSS scopes:
This is kind of a PITA to write though and if you have a CSS library that provide View Transition Classes it's difficult to import those into these scopes.
Class per Type
This PR also adds an object-as-map form that can be passed to all
classNameproperties:If multiple types match, then they're joined together. If no types match then the special
"default"entry is used instead. If any type has the value"none"then that wins and the ViewTransition is disabled (not assigned a name).These can be combined with
enter/exit/update/layout/shareprops to match based on kind of trigger and Transition Type.Events
In addition, you can also observe the types in the View Transition Event callbacks as the second argument. That way you can pick different imperative Animations based on the cause.
Future
In the future we might expose types to
useEffectfor more general purpose usage. This would also allow non-View Transition based Animations such as existing libraries to use this same feature to coordinate the same concept.We might also allow richer objects to be passed along here. Only the strings would apply to View Transitions but the imperative code and effects could do something else with them.