Update dependency react-dom to v19.1.1 #142
Loading…
x
Reference in New Issue
Block a user
No description provided.
Delete Branch "renovate/react-dom-19.x"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This PR contains the following updates:
19.0.0-rc-f38c22b244-20240704
->19.1.1
18.3.7
->19.1.9
Release Notes
facebook/react (react-dom)
v19.1.1
Compare Source
React
v19.1.0
Compare Source
Owner Stack
An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to enhance error overlays or other development tools. Owner Stacks are only available in development builds. Component Stacks in production are unchanged.
#32538, #32529, #32538
React
useId
to use valid CSS selectors, changing format from:r123:
to«r123»
. #32001React DOM
href
attribute is an empty string #31783getHoistableRoot()
didn’t work properly when the container was a Document #32321<!-- -->
) as a DOM container. #32250<script>
and<template>
tags to be nested within<select>
tags. #31837use-sync-external-store
exports
field topackage.json
foruse-sync-external-store
to support various entrypoints. #25231React Server Components
unstable_prerender
, a new experimental API for prerendering React Server Components on the server #31724registerServerReference
in client builds to handle server references in different environments. #32534v19.0.0
Compare Source
Below is a list of all new features, APIs, deprecations, and breaking changes. Read React 19 release post and React 19 upgrade guide for more information.
New Features
React
startTransition
can now accept async functions. Functions passed tostartTransition
are called “Actions”. A given Transition can include one or more Actions which update state in the background and update the UI with one commit. In addition to updating state, Actions can now perform side effects including async requests, and the Action will wait for the work to finish before finishing the Transition. This feature allows Transitions to include side effects likefetch()
in the pending state, and provides support for error handling, and optimistic updates.useActionState
: is a new hook to order Actions inside of a Transition with access to the state of the action, and the pending state. It accepts a reducer that can call Actions, and the initial state used for first render. It also accepts an optional string that is used if the action is passed to a formaction
prop to support progressive enhancement in forms.useOptimistic
: is a new hook to update state while a Transition is in progress. It returns the state, and a set function that can be called inside a transition to “optimistically” update the state to expected final value immediately while the Transition completes in the background. When the transition finishes, the state is updated to the new value.use
: is a new API that allows reading resources in render. In React 19,use
accepts a promise or Context. If provided a promise,use
will suspend until a value is resolved.use
can only be used in render but can be called conditionally.ref
as a prop: Refs can now be used as props, removing the need forforwardRef
.React DOM Client
<form> action
prop: Form Actions allow you to manage forms automatically and integrate withuseFormStatus
. When a<form> action
succeeds, React will automatically reset the form for uncontrolled components. The form can be reset manually with the newrequestFormReset
API.<button> and <input> formAction
prop: Actions can be passed to theformAction
prop to configure form submission behavior. This allows using different Actions depending on the input.useFormStatus
: is a new hook that provides the status of the parent<form> action
, as if the form was a Context provider. The hook returns the values:pending
,data
,method
, andaction
.<head>
section of the document.<head>
on the client before revealing the content of a Suspense boundary that depends on that stylesheet.preinit
,preload
,prefetchDNS
, andpreconnect
APIs to optimize initial page loads by moving discovery of additional resources like fonts out of stylesheet loading. They can also be used to prefetch resources used by an anticipated navigation.React DOM Server
prerender
andprerenderToNodeStream
APIs for static site generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. UnlikerenderToString
, they wait for data to load for HTML generation.React Server Components
Deprecations
element.ref
access: React 19 supports ref as a prop, so we’re deprecatingelement.ref
in favor ofelement.props.ref
. Accessing will result in a warning.react-test-renderer
: In React 19, react-test-renderer logs a deprecation warning and has switched to concurrent rendering for web usage. We recommend migrating your tests to @testing-library/react or @testing-library/react-nativeBreaking Changes
React 19 brings in a number of breaking changes, including the removals of long-deprecated APIs. We recommend first upgrading to
18.3.1
, where we've added additional deprecation warnings. Check out the upgrade guide for more details and guidance on codemodding.React
onUncaughtError
andonCaughtError
methods tocreateRoot
andhydrateRoot
to customize this error handling.propTypes
: UsingpropTypes
will now be silently ignored. If required, we recommend migrating to TypeScript or another type-checking solution.defaultProps
for functions: ES6 default parameters can be used in place. Class components continue to supportdefaultProps
since there is no ES6 alternative.contextTypes
andgetChildContext
: Legacy Context for class components has been removed in favor of thecontextType
API.React.createFactory
: Now that JSX is broadly supported, allcreateFactory
usage can be migrated to JSX components.react-test-renderer/shallow
: This has been a re-export of react-shallow-renderer since React 18. If needed, you can continue to use the third-party package directly. We recommend using @testing-library/react or @testing-library/react-native instead.React DOM
react-dom/test-utils
: We’ve movedact
fromreact-dom/test-utils
to react. All other utilities have been removed.ReactDOM
.render
,ReactDOM
.hydrate
: These have been removed in favor of the concurrent equivalents:ReactDOM
.createRoot
andReactDOM.hydrateRoot
.unmountComponentAtNode
: Removed in favor ofroot.unmount()
.ReactDOM
.findDOMNode
: You can replaceReactDOM
.findDOMNode
with DOM Refs.Notable Changes
React
<Context>
as a provider: You can now render<Context>
as a provider instead of<Context.Provider>
.useDeferredValue
initial value argument: When provided,useDeferredValue
will return the initial value for the initial render of a component, then schedule a re-render in the background with thedeferredValue
returned.useMemo
anduseCallback
will now reuse the memoized results from the first render, during the second render. Additionally, StrictMode will now double-invoke ref callback functions on initial mount.React DOM
TypeScript Changes
The most common changes can be codemodded with
npx types-react-codemod@latest preset-19 ./path-to-your-react-ts-files
.ReactChild
(replacement:React.ReactElement | number | string)
ReactFragment
(replacement:Iterable<React.ReactNode>
)ReactNodeArray
(replacement:ReadonlyArray<React.ReactNode>
)ReactText
(replacement:number | string
)VoidFunctionComponent
(replacement:FunctionComponent
)VFC
(replacement:FC
)prop-types
:Requireable
,ValidationMap
,Validator
,WeakValidationMap
create-react-class
:ClassicComponentClass
,ClassicComponent
,ClassicElement
,ComponentSpec
,Mixin
,ReactChildren
,ReactHTML
,ReactSVG
,SFCFactory
useRef
: The initial argument is now required to matchuseState
,createContext
etcuseRef()
are now always mutable instead of sometimes being immutable. This feature was too confusing for users and conflicted with legit cases where refs were managed by React and manually written to.ReactElement
typing: The props of React elements now default tounknown
instead ofany
if the element is typed asReactElement
JSX
namespace is removed to improve interoperability with other libraries using JSX. Instead, the JSX namespace is available from the React package:import { JSX } from 'react'
useReducer
typings: MostuseReducer
usage should not require explicit type arguments.For example, or
All Changes
React
useActionState()
hook to update state based on the result of a Form Action (#27270, #27278, #27309, #27302, #27307, #27366, #27370, #27321, #27374, #27372, #27397, #27399, #27460, #28557, #27570, #27571, #28631, #28788, #29694, #29695, #29694, #29665, #28232, #28319 by @acdlite, @eps1lon, and @rickhanlonii)use()
API to read resources in render (#25084, #25202, #25207, #25214, #25226, #25247, #25539, #25538, #25537, #25543, #25561, #25620, #25615, #25922, #25641, #25634, #26232, #26536, #26739, #28233 by @acdlite, @MofeiZ, @sebmarkbage, @sophiebits, @eps1lon, and @hansottowirtz)useOptimistic()
hook to display mutated state optimistically during an async mutation (#26740, #26772, #27277, #27453, #27454, #27936 by @acdlite)initialValue
argument touseDeferredValue()
hook (#27500, #27509, #27512, #27888, #27550 by @acdlite)element.ref
access (#28348, #28464, #28731 by @acdlite)<Context>
to mean<Context.Provider>
(#28226 by @gaearon)info
,group
, andgroupCollapsed
in StrictMode logging (#25172 by @timneutkens)useSyncExternalStore()
hydration in StrictMode (#26791 by @sophiebits)componentWillUnmount()
in StrictMode (#26842 by @tyao1)useState()
anduseReducer()
initializer functions in StrictMode (#28248 by @eps1lon)useId()
in StrictMode (#25713 by @gnoff)act()
no longer checksshouldYield
which can be inaccurate in test environments (#26317 by @acdlite)react.element
symbol toreact.transitional.element
(#28813 by @sebmarkbage)useSyncExternalStore()
re-render (#27199 by @acdlite)useSyncExternalStore()
dropped update when state is dispatched in render phase (#25578 by @pandaiolo)RefreshRuntime.findAffectedHostInstances
(#30538 by @gaearon)cache()
API (#27977, #28250 by @acdlite and @gnoff)propTypes
(#28324, #28326 by @gaearon)defaultProps
support, except for classes (#28733 by @acdlite)createFactory
(#27798 by @kassens)React DOM
useFormStatus()
hook to provide status information of the last form submission (#26719, #26722, #26788, #29019, #28728, #28413 by @acdlite and @eps1lon)preinit
,preinitModule
,preconnect
,prefetchDNS
,preload
, andpreloadModule
APIs.fetchPriority
to<img>
and<link>
(#25927 by @styfle)transformOrigin
prop (#26130 by @arav-ind)onScrollEnd
event (#26789 by @devongovett)<hr>
as child of<select>
(#27632 by @SouSingh)inert
(#24730 by @eps1lon)imageSizes
andimageSrcSet
(#22550 by @eps1lon)flushSync
exhausts queue even if something throws (#26366 by @acdlite)react
andreact-dom
versions don’t match (#29236 by @acdlite)srcset
andsrc
are assigned last on<img>
instances (#30340 by @gnoff)src
andhref
attributes (unless for<a href=”” />
) (#18513, #28124 by @bvaughn and @eps1lon)scale
style property (#25601 by @JonnyBurger)onChange
error message for controlled<select>
(#27740 by @Biki-das)render
,hydrate
,findDOMNode
,unmountComponentAtNode
,unstable_createEventHandle
,unstable_renderSubtreeIntoContainer
, andunstable_runWithPriority
. MovecreateRoot
andhydrateRoot
toreact-dom/client
. (#28271 by @gnoff)test-utils
(#28541 by @eps1lon)unstable_flushControlled
(#26397 by @kassens)renderToStaticNodeStream()
(#28873 by @gnoff)unstable_renderSubtreeIntoContainer
(#29771 by @kassens)React DOM Server
bootstrapScripts
andbootstrapModules
(#25104 by @gnoff)bootstrapModules
,bootstrapScripts
, and update priority queue (#26754, #26753, #27190, #27189 by @gnoff)onHeaders
entrypoint option (#27641, #27712 by @gnoff)<style>
and<script>
textContent to enable rendering inner content without dangerouslySetInnerHTML (#28870, #28871 by @gnoff)srcset
to trigger load event on mount (#30351 by @gnoff)onError
(#27761, #27850 by @gnoff and @sebmarkbage)crossorigin
support to bootstrap scripts (#26844 by @HenriqueLimas)nonce
andfetchpriority
in preload links (#26826 by @liuyenwei)referrerPolicy
toReactDOM.preload()
(#27096 by @styfle)react/jsx-dev-runtime
(#28921 by @himself65)errorInfo.digest
fromonRecoverableError
(#28222 by @gnoff)ReactTestRenderer
react-test-renderer
on web (#27903, #28904 by @jackpope and @acdlite)react-test-renderer/shallow
export (#25475, #28497 by @sebmarkbage and @jackpope)React Reconciler
prepareUpdate
(#26583, #27409 by @sebmarkbage and @sophiebits)React-Is
isConcurrentMode
andisAsyncMode
methods (#28224 by @gaearon)useSyncExternalStore
v19.0.0-rc-fb9a90fa48-20240614
Compare Source
v19.0.0-rc-fa6eab58-20240815
Compare Source
v19.0.0-rc-f9ebd85a-20240925
Compare Source
v19.0.0-rc-f994737d14-20240522
Compare Source
v19.0.0-rc-f90a6bcc-20240827
Compare Source
v19.0.0-rc-f6cce072-20240723
Compare Source
v19.0.0-rc-f65ac7bd-20240826
Compare Source
v19.0.0-rc-f3e09d6328-20240612
Compare Source
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
This PR has been generated by Renovate Bot.
861e7547c5
to9853ead966
9853ead966
toc612385462
c612385462
to3692f3d89c
3692f3d89c
to08826e0e7d
08826e0e7d
todd251395ce
dd251395ce
to39699ffc5b
39699ffc5b
toba5e1e7a24
ba5e1e7a24
tob3604c85a3
b3604c85a3
to4bba5015de
4bba5015de
toa0ef88063d
a0ef88063d
tod2d56dadfb
d2d56dadfb
to2325f44aa6
2325f44aa6
to1402ac2651
1402ac2651
tof95cd7f07f
f95cd7f07f
to15eaa45df7
15eaa45df7
tobaab0596ac
baab0596ac
tocbdce7014b
cbdce7014b
tof18d16a722
f18d16a722
tob6e4d3b22d
b6e4d3b22d
to78f386852d
78f386852d
to58eec42da0
58eec42da0
to44bb1e2884
44bb1e2884
tob31f3bec34
b31f3bec34
tobf4eff02a8
bf4eff02a8
to2c2a6dce9a
2c2a6dce9a
to612b48d1bd
612b48d1bd
to22c1a81118
22c1a81118
to697537f600
697537f600
to7b2f4f0342
7b2f4f0342
tof79c2b362e
f79c2b362e
tobbb1530073
bbb1530073
tod518e1a54d
d518e1a54d
to6f00eaf0f4
6f00eaf0f4
to2b21e60a2b
2b21e60a2b
tob13d14afa7
b13d14afa7
to0c3ccb0380
0c3ccb0380
toceecef6e9d
ceecef6e9d
toebd21b5123
ebd21b5123
to6dfcff8e26
6dfcff8e26
tob991f66986
b991f66986
to6301e5c2df
6301e5c2df
to2b9b38fb92
2b9b38fb92
to88ed546e3c
88ed546e3c
tocf0ca76e42
cf0ca76e42
to7f8b81e24b
7f8b81e24b
to8f6285a534
8f6285a534
to9f0d280308
9f0d280308
to2f7316f241
2f7316f241
to6de2e5f0ab
6de2e5f0ab
to5879c10d06
5879c10d06
tod18e3b18b7
d18e3b18b7
to51a78017aa
51a78017aa
toa8e8c3bcb0
a8e8c3bcb0
to6468c571a8
6468c571a8
to130ea71687
130ea71687
to6a02525ebe
6a02525ebe
toe1998d61cb
e1998d61cb
to7e2c9fcf39
7e2c9fcf39
tofb75b5be35
fb75b5be35
tob6d9b4112d
Update dependency react-dom to v19.0.0to Update dependency react-dom to v19.1.0b6d9b4112d
toe18a7014f0
e18a7014f0
toac33b54404
ac33b54404
toece0fd4677
ece0fd4677
tod6f787c779
d6f787c779
to91ea90c2d8
91ea90c2d8
to4ce7d6c2cf
4ce7d6c2cf
to56f760f892
56f760f892
to39e7898dc1
39e7898dc1
to3b81e2293e
3b81e2293e
to6a7ebb59c5
6a7ebb59c5
to278d6da389
278d6da389
toba3354fb4d
ba3354fb4d
to77fdff144e
77fdff144e
toe8ec1449b5
e8ec1449b5
to8f09f0606d
8f09f0606d
tof75ee2a623
f75ee2a623
to8fa46f6d3a
8fa46f6d3a
to4a4988bf09
4a4988bf09
to4da1bd87bf
4da1bd87bf
toba3970f636
ba3970f636
to8ab7bf3eaa
8ab7bf3eaa
to9b8efb4d8e
9b8efb4d8e
to87d3d65d45
87d3d65d45
tocb1d5b3a01
cb1d5b3a01
to430050948f
430050948f
to6e17bcec4b
6e17bcec4b
to549a614c7b
549a614c7b
to89608c7f3e
89608c7f3e
to5db62469b6
5db62469b6
to147bc444d0
147bc444d0
toc990aaee6a
c990aaee6a
to93d5418c14
93d5418c14
toea17c56c9a
ea17c56c9a
to14d3d5a75f
14d3d5a75f
to16d556da18
16d556da18
to912679b864
912679b864
to5b888d832a
5b888d832a
to466ef899cc
466ef899cc
toaed26f34a0
aed26f34a0
tobbee77cac2
bbee77cac2
toa94081f18b
a94081f18b
toac2dd3be62
ac2dd3be62
to472f01581a
472f01581a
to0aebee80c7
0aebee80c7
to5d0bb1e1e2
5d0bb1e1e2
to1e17dd515b
1e17dd515b
to3ea3114026
3ea3114026
toab6ed671c9
ab6ed671c9
toe649d39ec5
e649d39ec5
tob6e0a823bb
b6e0a823bb
to87116922f2
87116922f2
toe5d2628d99
e5d2628d99
toc67708f02e
c67708f02e
to3c9e2094e4
3c9e2094e4
tof104b01133
f104b01133
to2dd658b5cc
2dd658b5cc
to5bf134db43
5bf134db43
to2c7680625c
2c7680625c
to3807ccb2a3
3807ccb2a3
to8dd8f117a4
8dd8f117a4
tobc78f6fd1d
bc78f6fd1d
tob088daa7db
b088daa7db
to0a4b086e29
0a4b086e29
to600a27356e
600a27356e
toa6fe547d49
a6fe547d49
tob7a9bd3647
b7a9bd3647
tofeb10982ae
feb10982ae
to5c045854dc
5c045854dc
to88891f4972
Update dependency react-dom to v19.1.0to Update dependency react-dom to v19.1.188891f4972
toe5d8a1c9c6
e5d8a1c9c6
to664c42a0a8
664c42a0a8
tof7f57a42cb
Checkout
From your project repository, check out a new branch and test the changes.