The library for web and native user interfaces.
MIT License
Bot releases are visible (Hide)
act
from react
f1338f
Published by rickhanlonii 6 months ago
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.
this.refs
to support string ref codemod 909071
findDOMNode
outside StrictMode c3b283
test-utils
methods d4ea75
defaultProps
for function components #25699
key
#25697
act
from test-utils
d4ea75
Published by gnoff over 2 years ago
onRecoverableError
. (@gnoff in #24591)document
causing a blank page on mismatch. (@gnoff in #24523)setState
in Safari when adding an iframe. (@gaearon in #24459)<title>
elements to match the browser constraints. (@gnoff in #24679)highWaterMark
to 0
. (@jplhomer in #24641)Published by acdlite over 2 years ago
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 in useEffect
. (@gaearon in #24298)setState
in useInsertionEffect
. (@gaearon in #24295)bootstrapScriptContent
contents. (@gnoff in #24385)renderToPipeableStream
. (@gnoff in #24291)Published by acdlite over 2 years ago
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.
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
and useTransition
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 for useEffect
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.These new APIs are now exported from react-dom/client
:
createRoot
: New method to create a root to render
or unmount
. Use it instead of ReactDOM.render
. New features in React 18 don't work without it.hydrateRoot
: New method to hydrate a server rendered application. Use it instead of ReactDOM.hydrate
in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.Both createRoot
and hydrateRoot
accept a new option called onRecoverableError
in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use reportError
, or console.error
in the older browsers.
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.
react-dom
: ReactDOM.render
has been deprecated. Using it will warn and run your app in React 17 mode.react-dom
: ReactDOM.hydrate
has been deprecated. Using it will warn and run your app in React 17 mode.react-dom
: ReactDOM.unmountComponentAtNode
has been deprecated.react-dom
: ReactDOM.renderSubtreeIntoContainer
has been deprecated.react-dom/server
: ReactDOMServer.renderToNodeStream
has been deprecated.flushSync
.<Suspense>
boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.Promise
, Symbol
, and Object.assign
. If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.scheduler/tracing
APIundefined
: React no longer throws if you return undefined
from a component. This makes the allowed component return values consistent with values that are allowed in the middle of a component tree. We suggest to use a linter to prevent mistakes like forgetting a return
statement before JSX.act
warnings are now opt-in: If you're running end-to-end tests, the act
warnings are unnecessary. We've introduced an opt-in mechanism so you can enable them only for unit tests where they are useful and beneficial.setState
on unmounted components: Previously, React warned about memory leaks when you call setState
on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've removed this warning.renderToString
: Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest <Suspense>
boundary and then retry rendering the same content on the client. It is still recommended that you switch to a streaming API like renderToPipeableStream
or renderToReadableStream
instead.renderToStaticMarkup
: Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest <Suspense>
boundary and retry rendering on the client.useTransition
and useDeferredValue
to separate urgent updates from transitions. (#10426, #10715, #15593, #15272, #15578, #15769, #17058, #18796, #19121, #19703, #19719, #19724, #20672, #20976 by @acdlite, @lunaruan, @rickhanlonii, and @sebmarkbage)useId
for generating unique IDs. (#17322, #18576, #22644, #22672, #21260 by @acdlite, @lunaruan, and @sebmarkbage)useSyncExternalStore
to help external store libraries integrate with React. (#15022, #18000, #18771, #22211, #22292, #22239, #22347, #23150 by @acdlite, @bvaughn, and @drarmstr)startTransition
as a version of useTransition
without pending feedback. (#19696 by @rickhanlonii)useInsertionEffect
for CSS-in-JS libraries. (#21913 by @rickhanlonii)<StrictMode>
re-run effects to check for restorable state. (#19523 , #21418 by @bvaughn and @lunaruan)object-assign
polyfill. (#23351 by @sebmarkbage)unstable_changedBits
API. (#20953 by @acdlite)useEffect
resulting from discrete events like clicks synchronously. (#21150 by @acdlite)fallback={undefined}
now behaves the same as null
and isn't ignored. (#21854 by @rickhanlonii)lazy()
resolving to the same component equivalent. (#20357 by @sebmarkbage)setImmediate
when available over MessageChannel
. (#20834 by @gaearon)useReducer
observing incorrect props by removing the eager bailout mechanism. (#22445 by @josephsavona)setState
being ignored in Safari when appending iframes. (#23111 by @gaearon)ZonedDateTime
in the tree. (#20617 by @dimaqq)null
in tests. (#22695 by @SimenB)onLoad
not triggering when concurrent features are on. (#23316 by @gnoff)NaN
. (#23333 by @hachibeeDI)package.json
as one of the entry points. (#22954 by @Jack)createRoot
and hydrateRoot
. (#10239, #11225, #12117, #13732, #15502, #15532, #17035, #17165, #20669, #20748, #20888, #21072, #21417, #21652, #21687, #23207, #23385 by @acdlite, @bvaughn, @gaearon, @lunaruan, @rickhanlonii, @trueadm, and @sebmarkbage)aria-description
to the list of known ARIA attributes. (#22142 by @mahyareb)onResize
event to video elements. (#21973 by @rileyjshaw)imageSizes
and imageSrcSet
to known props. (#22550 by @eps1lon)<option>
children if value
is provided. (#21431 by @sebmarkbage)aspectRatio
style not being applied. (#21100 by @gaearon)renderSubtreeIntoContainer
is called. (#23355 by @acdlite)renderToNodeStream
. (#23359 by @sebmarkbage)act
is used in production. (#21686 by @acdlite)global.IS_REACT_ACT_ENVIRONMENT
. (#22561 by @acdlite)act
batch updates. (#21797 by @acdlite)exports
field to package.json
. (#23087 by @otakustay)lazy
support. (#24068 by @gnoff)globalThis
instead of window
for edge environments. (#22777 by @huozhi)Published by gaearon over 3 years ago
SharedArrayBuffer
cross-origin isolation warning. (@koba04 and @bvaughn in #20831, #20832, and #20840)Published by gaearon over 3 years ago
Published by gaearon almost 4 years ago
Today, we are releasing React 17!
Learn more about React 17 and how to update to it on the official React blog.
react/jsx-runtime
and react/jsx-dev-runtime
for the new JSX transform. (@lunaruan in #18299)displayName
on context for improved stacks. (@eps1lon in #18224)'use strict'
from leaking in the UMD bundles. (@koba04 in #19614)fb.me
for redirects. (@cylim in #19598)document
. (@trueadm in #18195 and others)useEffect
cleanup functions asynchronously. (@bvaughn in #17925)focusin
and focusout
for onFocus
and onBlur
. (@trueadm in #19186)Capture
events use the browser capture phase. (@trueadm in #19221)onScroll
event. (@gaearon in #19464)forwardRef
or memo
component returns undefined
. (@gaearon in #19550)console
in the second render pass of DEV mode double render. (@sebmarkbage in #18547)ReactTestUtils.SimulateNative
API. (@gaearon in #13407)ReactDOM.flushSync
during lifecycle methods (but warn). (@sebmarkbage in #18759)code
property to the keyboard event objects. (@bl00mber in #18287)disableRemotePlayback
property for video
elements. (@tombrowndev in #18619)enterKeyHint
property for input
elements. (@eps1lon in #18634)value
is provided to <Context.Provider>
. (@charlie1404 in #19054)memo
or forwardRef
components return undefined
. (@bvaughn in #19550)onTouchStart
, onTouchMove
, and onWheel
passive. (@gaearon in #19654)setState
hanging in development inside a closed iframe. (@gaearon in #19220)defaultProps
. (@jddxf in #18539)dangerouslySetInnerHTML
is undefined
. (@eps1lon in #18676)require
implementation. (@just-boris in #18632)onBeforeInput
reporting an incorrect event.type
. (@eps1lon in #19561)event.relatedTarget
reported as undefined
in Firefox. (@claytercek in #19607)movementX/Y
polyfill with capture events. (@gaearon in #19672)onSubmit
and onReset
events. (@gaearon in #19333)useCallback
behavior consistent with useMemo
for the server renderer. (@alexmckenley in #18783)findByType
error message. (@henryqdineen in #17439)unstable_
prefix before the experimental APIs. (@acdlite in #18825)unstable_discreteUpdates
and unstable_flushDiscreteUpdates
. (@trueadm in #18825)timeoutMs
argument. (@acdlite in #19703)<div hidden />
prerendering in favor of a different future API. (@acdlite in #18917)unstable_expectedLoadTime
to Suspense for CPU-bound trees. (@acdlite in #19936)unstable_useOpaqueIdentifier
Hook. (@lunaruan in #17322)unstable_startTransition
API. (@rickhanlonii in #19696)act
in the test renderer no longer flushes Suspense fallbacks. (@acdlite in #18596)useMutableSource
that may happen when getSnapshot
changes. (@bvaughn in #18297)useMutableSource
. (@bvaughn in #18912)Published by gaearon about 4 years ago
Published by gaearon about 4 years ago
Published by gaearon about 4 years ago
Published by acdlite over 4 years ago
componentWillReceiveProps
, shouldComponentUpdate
, and so on). (@gaearon in #18330)Published by threepointone over 4 years ago
React.createFactory()
(@trueadm in #17878)style
may cause an unexpected collision (@sophiebits in #14181, #18002)unstable_createPortal
(@trueadm in #17880)onMouseEnter
being fired on disabled buttons (@AlfredoGJ in #17675)shouldComponentUpdate
twice when developing in StrictMode
(@bvaughn in #17942)version
property to ReactDOM (@ealush in #15780)toString()
of dangerouslySetInnerHTML
(@sebmarkbage in #17773)ReactDOM.createRoot()
(@trueadm in #17937)ReactDOM.createRoot()
callback params and added warnings on usage (@bvaughn in #17916)SuspenseList
CPU bound heuristic (@sebmarkbage in #17455)isPending
only being true when transitioning from inside an input event (@acdlite in #17382)React.memo
components dropping updates when interrupted by a higher priority update (@acdlite in #18091)Published by lunaruan almost 5 years ago
• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/
Published by acdlite almost 5 years ago
mouseenter
handlers from firing twice inside nested React containers. @yuanoook in #16928
unstable_createRoot
and unstable_createSyncRoot
experimental APIs. (These are available in the Experimental channel as createRoot
and createSyncRoot
.) (@acdlite in #17088)• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/
Published by acdlite about 5 years ago
• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/
Published by acdlite about 5 years ago
Published by acdlite about 5 years ago
Object.is
instead of inline polyfill, when available. (@ku8ar in #16212)postMessage
loop with short intervals instead of attempting to align to frame boundaries with requestAnimationFrame
. (@acdlite in #16214)• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/
Published by acdlite about 5 years ago
<React.Profiler>
API for gathering performance measurements programmatically. (@bvaughn in #15172)unstable_ConcurrentMode
in favor of unstable_createRoot
. (@acdlite in #15532)UNSAFE_*
lifecycle methods. (@bvaughn in #15186 and @threepointone in #16103)javascript:
URLs as a common attack surface. (@sebmarkbage in #15047)disablePictureInPicture
attribute on <video>
. (@eek in #15334)onLoad
event for <embed>
. (@cherniavskii in #15614)useState
state from DevTools. (@bvaughn in #14906)setState
is called from useEffect
, creating a loop. (@gaearon in #15180)findDOMNode
for components wrapped in <Suspense>
. (@acdlite in #15312)!important
style. (@acdlite in #15861 and #15882)act(async () => ...)
for testing asynchronous state updates. (@threepointone in #14853)act
from different renderers. (@threepointone in #16039 and #16042)act()
call. (@threepointone in #15763 and #16041)act
from the wrong renderer. (@threepointone in #15756)• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/
This is a release candidate for React v16.9.0.
Changelog is available in https://github.com/facebook/react/pull/16254.
• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/