Update react monorepo to v19 #11
Loading…
Reference in New Issue
Block a user
No description provided.
Delete Branch "renovate/react-monorepo"
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:
18.0.21
->19.0.8
^17.0.2
->^19.0.0
^17.0.2
->^19.0.0
Release Notes
facebook/react (react)
v19.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
v18.3.1
Compare Source
act
fromreact
f1338fv18.3.0
Compare Source
This release is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19.
Read the React 19 Upgrade Guide for more info.
React
this.refs
to support string ref codemod 909071findDOMNode
outside StrictMode c3b283test-utils
methods d4ea75defaultProps
for function components #25699key
#25697act
fromtest-utils
d4ea75React DOM
unmountComponentAtNode
8a015brenderToStaticNodeStream
#28874v18.2.0
Compare Source
React DOM
onRecoverableError
. (@gnoff in #24591)document
causing a blank page on mismatch. (@gnoff in #24523)setState
in Safari when adding an iframe. (@gaearon in #24459)React DOM Server
<title>
elements to match the browser constraints. (@gnoff in #24679)highWaterMark
to0
. (@jplhomer in #24641)Server Components (Experimental)
useId()
inside Server Components. (@gnoff in #24172)v18.1.0
Compare Source
React DOM
react-dom/client
when using UMD bundle. (@alireza-molaee in #24274)suppressHydrationWarning
to work in production too. (@gaearon in #24271)componentWillUnmount
firing twice inside of Suspense. (@acdlite in #24308)useDeferredValue
causing an infinite loop when passed an unmemoized value. (@acdlite in #24247)setState
loop inuseEffect
. (@gaearon in #24298)setState
inuseInsertionEffect
. (@gaearon in #24295)React DOM Server
bootstrapScriptContent
contents. (@gnoff in #24385)renderToPipeableStream
. (@gnoff in #24291)ESLint Plugin: React Hooks
Use Subscription
use-sync-external-store
shim. (@gaearon in #24289)v18.0.0
Compare Source
Below is a list of all new features, APIs, deprecations, and breaking changes.
Read React 18 release post and React 18 upgrade guide for more information.
New Features
React
useId
is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.startTransition
anduseTransition
let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).useDeferredValue
lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input.useSyncExternalStore
is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need foruseEffect
when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.useInsertionEffect
is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.React DOM Client
These new APIs are now exported from
react-dom/client
:createRoot
: New method to create a root torender
orunmount
. Use it instead ofReactDOM.render
. New features in React 18 don't work without it.hydrateRoot
: New method to hydrate a server rendered application. Use it instead ofReactDOM.hydrate
in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.Both
createRoot
andhydrateRoot
accept a new option calledonRecoverableError
in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will usereportError
, orconsole.error
in the older browsers.React DOM Server
These new APIs are now exported from
react-dom/server
and have full support for streaming Suspense on the server:renderToPipeableStream
: for streaming in Node environments.renderToReadableStream
: for modern edge runtime environments, such as Deno and Cloudflare workers.The existing
renderToString
method keeps working but is discouraged.Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR becomes conflicted, 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.
6501980f5c
tof06c8aee01
f06c8aee01
to0a3d239fcc
0a3d239fcc
toc4be3b0515
c4be3b0515
tof1cf0fa9f9
f1cf0fa9f9
to299c73441f
299c73441f
toa042631769
a042631769
tod76a5d51f7
d76a5d51f7
tocd6eb3388e
cd6eb3388e
tob67e92ff6d
b67e92ff6d
toe1ea0847ad
e1ea0847ad
to69253643c3
69253643c3
tof938ad8b2e
f938ad8b2e
to0fa957eb06
0fa957eb06
to07dd62ae12
07dd62ae12
toa51d88762e
a51d88762e
toa288b90e10
a288b90e10
to785cfb4d2c
785cfb4d2c
toc29e641d38
c29e641d38
toc4ed5f2209
c4ed5f2209
to8ca6cd5b04
8ca6cd5b04
to4519a37bfc
4519a37bfc
to4d3d3481b9
4d3d3481b9
to0c666d1c5b
Update react monorepo to v18to Update react monorepo0c666d1c5b
to2993a102b8
2993a102b8
tof3906b19b5
f3906b19b5
to7b2e42bf73
7b2e42bf73
to37a8c8b567
37a8c8b567
to4605f424d1
4605f424d1
to0c62ad0b2c
0c62ad0b2c
to56e7f89113
56e7f89113
tof09940e2cf
f09940e2cf
to3b89436bc6
3b89436bc6
toeec247545f
eec247545f
to92e6cea94f
92e6cea94f
tof451900636
f451900636
to38d1872fab
38d1872fab
toe2449691b9
e2449691b9
to0edfd4e28b
Update react monorepoto Update react monorepo to v18.2.00edfd4e28b
to5085e5b562
Update react monorepo to v18.2.0to Update react monorepo5085e5b562
to8f681c9f66
8f681c9f66
tof98849a17b
f98849a17b
to971538e108
971538e108
to442da91492
442da91492
to3ae8b39566
3ae8b39566
to83b499610d
83b499610d
to467fc5d05a
467fc5d05a
to0e12706a13
0e12706a13
todfc46ac890
dfc46ac890
to179951db29
179951db29
to8037334e48
8037334e48
toe40b2c73b7
e40b2c73b7
to532ce2401e
532ce2401e
tob1caf95007
b1caf95007
toa05b5a2055
a05b5a2055
to5e3793123e
5e3793123e
to6f735dbb14
6f735dbb14
to4f79ed0eee
4f79ed0eee
to8b3415b74e
8b3415b74e
to6c19e9cc23
6c19e9cc23
to16151f7a73
16151f7a73
toa1a3866a60
a1a3866a60
toe69e46c579
e69e46c579
to56cda63a88
56cda63a88
todd257beffb
dd257beffb
to6b1fbc9874
6b1fbc9874
to68b3ed46be
68b3ed46be
toa5693d6a1b
a5693d6a1b
toe3f709cb1d
e3f709cb1d
to057f1ff2ec
057f1ff2ec
to29ee0abd1b
29ee0abd1b
to599ab1fa77
599ab1fa77
toc25833ba25
c25833ba25
to18ff4227fb
18ff4227fb
tod6fb1a0f54
d6fb1a0f54
to6bf6a8c2b5
6bf6a8c2b5
to07150a5215
07150a5215
toc8d050f054
c8d050f054
to0583f8dee6
0583f8dee6
todd5eab944e
dd5eab944e
todf8156ddac
df8156ddac
to3c12d7a989
3c12d7a989
to72001dae0b
72001dae0b
to1b4f96f75e
1b4f96f75e
to74b79ab4e3
74b79ab4e3
to1832edd826
1832edd826
to76c4f36ec5
76c4f36ec5
tocbde0b6779
cbde0b6779
toa1a4d90e35
a1a4d90e35
toc4d2c0daeb
c4d2c0daeb
to5962f7f8c7
5962f7f8c7
to790cb24ff1
790cb24ff1
todbfce03d85
dbfce03d85
tobb294d41cf
bb294d41cf
to9be2a3291c
9be2a3291c
to978e499c96
978e499c96
to3d89d2f8c7
3d89d2f8c7
to200ec8178e
200ec8178e
toe728ed72e8
e728ed72e8
toac3d59a11e
ac3d59a11e
tocebb97eab5
cebb97eab5
to79f6677e89
79f6677e89
tof1c86955ad
f1c86955ad
to92b1e536e1
92b1e536e1
tof66f5e4dfb
f66f5e4dfb
to82bdcdfd10
82bdcdfd10
to1e872e1fab
1e872e1fab
to6733ec5486
6733ec5486
toa407709d21
a407709d21
to1838ef6b55
1838ef6b55
toba6f1c2d05
ba6f1c2d05
to0f589aa980
0f589aa980
to030f842736
030f842736
to28c69ad986
28c69ad986
to09b192022c
09b192022c
to9ec4619d42
Update react monorepoto Update react monorepo to v18.3.09ec4619d42
toda86a4bc90
Update react monorepo to v18.3.0to Update react monorepoUpdate react monorepoto Update react monorepo to v18.3.1da86a4bc90
toa534cfe56d
Update react monorepo to v18.3.1to Update react monorepoa534cfe56d
to5665dd10cc
5665dd10cc
to0c47e048e1
0c47e048e1
tof1cdfce3b3
f1cdfce3b3
tof876ae40ba
f876ae40ba
to57e69f6e94
57e69f6e94
to11d27b1ecf
11d27b1ecf
tobe182b5ad6
be182b5ad6
to8ebd78f531
8ebd78f531
toef5ecb2d81
ef5ecb2d81
to41d4c5cc83
41d4c5cc83
to525aeef1f5
525aeef1f5
tod113367187
Update react monorepoto Update react monorepo to v19d113367187
toff79026e47
ff79026e47
toe05c9b68d6
e05c9b68d6
to4a89aa4ce5
4a89aa4ce5
to291b66bad0
291b66bad0
to0f9f78b45d
0f9f78b45d
to2da9f9f0f1
2da9f9f0f1
to6280ee0e41
6280ee0e41
to5c87fadca6
Checkout
From your project repository, check out a new branch and test the changes.