act
from react
f1338fThis 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 909071findDOMNode
outside StrictMode c3b283test-utils
methods d4ea75defaultProps
for function components #25699key
#25697act
from test-utils
d4ea75onRecoverableError
. (@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)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)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)SharedArrayBuffer
cross-origin isolation warning. (@koba04 and @bvaughn in #20831, #20832, and #20840)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)componentWillReceiveProps
, shouldComponentUpdate
, and so on). (@gaearon in #18330)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)• 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/
mouseenter
handlers from firing twice inside nested React containers. @yuanoook in #16928unstable_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/
• 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/
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/
<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/
await act(async () => ...)
(@threepointone in #14853)useReducer()
. (@acdlite in #15124)contextType
is set to Context.Consumer
instead of Context
. (@aweary in #14831)contextType
is set to invalid values. (@gaearon in #15142)size
attribute. (@kulek1 in #14242)useEffect(async () => ...)
warning message. (@gaearon in #15118)setState
in shallow renderer to work with Hooks. (@gaearon in #15120)React.memo
. (@aweary in #14816)forwardRef
. (@eps1lon in #15100)ReactDOM.render
being ignored inside useEffect
. (@gaearon in #14799)useImperativeHandle
to work correctly when no deps are specified. (@gaearon in #14801)crossOrigin
attribute to work in SVG image
elements. (@aweary in #14832)act()
warning. (@threepointone in #14855)useReducer
Hook lazy initialization API. (@acdlite in #14723)useState
and useReducer
Hooks. (@acdlite in #14569)Object.is
algorithm for comparing useState
and useReducer
values. (@Jessidhia in #14752)useEffect
/useMemo
/useCallback
Hooks. (@acdlite in #14594)React.lazy()
. (@gaearon in #14626)undefined
or a function. All other values, including null
, are not allowed. @acdlite in #14119shouldComponentUpdate
in the presence of getDerivedStateFromProps
for Shallow Renderer. (@chenesan in #14613)ReactTestRenderer.act()
and ReactTestUtils.act()
for batching updates so that tests more closely match real behavior. (@threepointone in #14744)React.lazy
for large numbers of lazily-loaded components. (@acdlite in #14429)react-dom/[email protected]
and react@<16.6
. (@gaearon in #14291)setTimeout
in testing environments. (@bvaughn in #14358)Suspense
and lazy
. (@acdlite in #14133, #14157, and #14164)React.memo
updates in React DevTools. (@bvaughn in #14141)renderToNodeStream()
calls. (@sebmarkbage in #14182)React.memo()
as an alternative to PureComponent
for functions. (@acdlite in #13748)React.lazy()
for code splitting components. (@acdlite in #13885)React.StrictMode
now warns about legacy context API. (@bvaughn in #13760)React.StrictMode
now warns about findDOMNode
. (@sebmarkbage in #13841)unstable_AsyncMode
to unstable_ConcurrentMode
. (@trueadm in #13732)unstable_Placeholder
to Suspense
, and delayMs
to maxDuration
. (@gaearon in #13799 and @sebmarkbage in #13922)contextType
as a more ergonomic way to subscribe to context from a class. (@bvaughn in #13728)getDerivedStateFromError
lifecycle method for catching errors in a future asynchronous server-side renderer. (@bvaughn in #13746)<Context>
is used instead of <Context.Consumer>
. (@trueadm in #13829)window.event
in development. (@sergei-startsev in #13697)React.memo()
. (@alexmckenley in #13855)contextType
. (@alexmckenley and @sebmarkbage in #13889)scheduler
. (@gaearon in #13683)requestAnimationFrame
earlier. (@acdlite in #13785)envify
transform to the package. (@mridgway in #13766)<iframe>
regression (@JSteunou in #13650)updateWrapper
so that <textarea>
s no longer re-render when data is unchanged (@joelbarbosa in #13643)React.forwardRef
receives an unexpected number of arguments. (@andresroberto in #13636)isReactComponent
. (@gaearon in #13608)react-dom/profiling
with schedule/tracking
. (@bvaughn in #13605)ForwardRef
component defines a displayName
, use it in warnings. (@probablyup in #13615)React.forwardRef
render function doesn't take exactly two arguments (@bvaughn in #13168)createElement
by mistake (@DCtheTall in #13131)onRender
until after mutations (@bvaughn in #13572)react-dom/profiling
entry point alias for profiling in production (@bvaughn in #13570)onAuxClick
event for browsers that support it (@jquense in #11571)movementX
and movementY
fields to mouse events (@jasonwilliams in #9018)tangentialPressure
and twist
fields to pointer events (@motiz88 in #13374)focusable
SVG attribute (@gaearon in #13339)<noscript>
on the client when when hydrating (@Ephem in #13537)gridArea
to be treated as a unitless CSS property (@mgol in #13550)compositionend
event when typing Korean on IE11 (@crux153 in #12563)children
in the <option>
tag (@Slowyn in #13261, @gaearon in #13465)checked
attribute not getting initially set on the input
(@dilidili in #13114)dangerouslySetInnerHTML
when __html
is not a string (@gaearon in #13353)onChange
to fire on falsy values too (@nicolevy in #12628)submit
and reset
buttons getting an empty label (@ellsclytn in #12780)onSelect
event not being triggered after drag and drop (@gaearon in #13422)onClick
event not working inside a portal on iOS (@aweary in #11927)onChange
to not fire in some cases (@gaearon in #13423)"false"
or "true"
is the value of a boolean DOM prop (@motiz88 in #13372)this.state
is initialized to props
(@veekas in #11658)style
on hydration in IE due to noisy false positives (@mgol in #13534)StrictMode
in the component stack (@gaearon in #13240)window.event
in IE (@ConradIrwin in #11696)folder/index.js
naming convention (@gaearon in #12059)getDerivedStateFromProps
without initialized state (@flxwu in #13317)<webview>
tag without warnings (@philipp-spiess in #13301)e.preventDefault()
was called (@gaearon in #13384)unstable_deferredUpdates
in favor of unstable_scheduleWork
from schedule
(@gaearon in #13488)dangerouslySetInnerHtml
in a selected <option>
(@mridgway in #13078)setTimeout
is missing (@dustinsoftware in #13088)this
in a functional component for shallow renderer to be undefined
(@koba04 in #13144)ReactTestUtils.mockComponent()
helper (@bvaughn in #13193)ReactDOM.createPortal
usage within the test renderer (@bvaughn in #12895)Fix a potential XSS vulnerability when the attacker controls an attribute name (CVE-2018-6341
). This fix is available in the latest [email protected]
, as well as in previous affected minor versions: [email protected]
, [email protected]
, [email protected]
, and [email protected]
. (@gaearon in #13302)
Fix a crash in the server renderer when an attribute is called hasOwnProperty
. This fix is only available in [email protected]
. (@gaearon in #13303)
type
changes from some other types to text
. (@spirosikmd in #12135)event.target
value for the onChange
event in IE9. (@nhunzaker in #12976)<React.Fragment />
from a component. (@philipp-spiess in #12966)React.unstable_Profiler
component for measuring performance. (@bvaughn in #12745)getDerivedStateFromProps()
regardless of the reason for re-rendering. (@acdlite in #12600 and #12802)forwardRef()
on a deeper setState()
. (@gaearon in #12690)propTypes
on a context provider component. (@nicolevy in #12658)react-lifecycles-compat
in <StrictMode>
. (@bvaughn in #12644)forwardRef()
render function has propTypes
or defaultProps
. (@bvaughn in #12644)forwardRef()
and context consumers are displayed in the component stack. (@sophiebits in #12777)getDerivedStateFromProps()
support to match the new React DOM behavior. (@koba04 in #12676)testInstance.parent
crash when the parent is a fragment or another special node. (@gaearon in #12813)forwardRef()
components are now discoverable by the test renderer traversal methods. (@gaearon in #12725)setState()
updaters that return null
or undefined
. (@koba04 in #12756)null
or undefined
to React.cloneElement
. (@nicolevy in #12534)<StrictMode>
. (@bvaughn in #12546)unstable_observedBits
API with nesting. (@gaearon in #12543)Fragment
. (@heikkilamarko in #12504)setState()
in constructor. (@gaearon in #12532)getDerivedStateFromProps()
not getting applied in some cases. (@acdlite in #12528)React.createRef()
API as an ergonomic alternative to callback refs. (@trueadm in #12162)React.forwardRef()
API to let components forward their refs to a child. (@bvaughn in #12346)React.Fragment
. (@XaveScor in #11823)React.unstable_AsyncComponent
with React.unstable_AsyncMode
. (@acdlite in #12117)setState()
on an unmounted component. (@sophiebits in #12347)getDerivedStateFromProps()
lifecycle and UNSAFE_
aliases for the legacy lifecycles. (@bvaughn in #12028)getSnapshotBeforeUpdate()
lifecycle. (@bvaughn in #12404)<React.StrictMode>
wrapper to help prepare apps for async rendering. (@bvaughn in #12083)onLoad
and onError
events on the <link>
tag. (@roderickhsiao in #11825)noModule
boolean attribute on the <script>
tag. (@aweary in #11900)onKeyPress
in more browsers. (@nstraub in #10514)value
and defaultValue
to ignore Symbol values. (@nhunzaker in #11741)opera
with a null
value. @alisherdavronov in #11854)<option selected>
. (@watadarkstar in #11821)ReactDOM.unstable_createPortal()
in favor of ReactDOM.createPortal()
. (@prometheansacrifice in #11747)React.Component
. (@wyze in #11993)this.state
of different components getting mixed up. (@sophiebits in #12323)toTree()
. (@maciej-ka in #12107 and @gaearon in #12154)null
for components that don't set it. (@jwbay in #11965)contextTypes
. (@koba04 in #11922)ReactIs.isValidElementType()
to help higher-order components validate their inputs. (@jamesreggio in #12483)react-reconciler/persistent
for building renderers that use persistent data structures. (@gaearon in #12156)finalizeInitialChildren()
. (@jquense in #11970)useSyncScheduling
from the host config. (@acdlite in #11771)Fragment
as named export to React. (@clemmy in #10783)React.Children
utilities. (@MatteoVH in #11422)onChange
event in some cases. (@jquense in #11028)setState()
callback firing too early when called from componentWillMount
. (@accordeiro in #11507)capture
attribute. (@maxschmeling in #11424)ReactDOMServer
public API. (@travi in #11531)autoFocus={false}
attribute on the server. (@gaearon in #11543)Starting with 16.1.0, we will no longer be publishing new releases on Bower. You can continue using Bower for old releases, or point your Bower configs to the React UMD builds hosted on unpkg that mirror npm releases and will continue to be updated.
React.Children
utilities. (@MatteoVH in #11378)render
method but doesn't extend a known base class. (@sw-yx in #11168)on
as a custom attribute for AMP. (@nuc in #11153)onMouseEnter
and onMouseLeave
firing on wrong elements. (@gaearon in #11164)null
showing up in a warning instead of the component stack. (@gaearon in #10915)tabIndex
not getting applied to SVG elements. (@gaearon in #11034)dangerouslySetInnerHTML
in IE. (@OriR in #11108)form.reset()
to respect defaultValue
on uncontrolled <select>
. (@aweary in #11057)<textarea>
placeholder not rendering on IE11. (@gaearon in #11177)<dialog>
element. (@gaearon in #11035)componentDidReceiveProps
method. (@iamtommcc in #11479)contentEditable
and children
. (@Ethan-Arrowood in #11208)select
gets null value
. (@Hendeca in #11141)suppressHydrationWarning
attribute for intentional client/server text mismatches. (@sebmarkbage in #11126)autoFocus
attribute into SSR markup. (@gaearon in #11192)setState()
calls in componentWillMount()
in shallow renderer. (@Hypnosphi in #11167)shouldComponentUpdate()
after forceUpdate()
. (@d4rky-pl in #11239 and #11439)forceUpdate()
and React.PureComponent
correctly. (@koba04 in #11440)package.json
dependency. (@gaearon in #11340)package.json
dependency. (@gaearon in #11341)react-art/Circle
, react-art/Rectangle
, and react-art/Wedge
. (@gaearon in #11343)Learn more in the React 16.0 announcement post!
render
. (Docs coming soon!)ReactDOM.createPortal()
. (Docs coming soon!)ReactDOMServer.renderToNodeStream()
and ReactDOMServer.renderToStaticNodeStream()
. (@aickin in #10425, #10044, #10039, #10024, #9264, and others.)ReactDOM.render()
and ReactDOM.unstable_renderIntoContainer()
now return null
if called from inside a lifecycle method.
setState
behavior:
setState
with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.setState
directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState
from render.setState
callback (second argument) now fires immediately after componentDidMount
/ componentDidUpdate
instead of after all components have rendered.<A />
with <B />
, B.componentWillMount
now always happens before A.componentWillUnmount
. Previously, A.componentWillUnmount
could fire first in some cases.ref
to a component would always detach the ref before that component's render is called. Now, we change the ref
later, when applying the changes to the DOM.ReactDOM.unmountComponentAtNode
. See this example.componentDidUpdate
lifecycle no longer receives prevContext
param. (@bvaughn in #8631)componentDidUpdate()
because DOM refs are not available. This also makes it consistent with componentDidMount()
(which does not get called in previous versions either).unstable_batchedUpdates()
anymore.ReactDOM.unstable_batchedUpdates
now only takes one extra argument after the callback.react/dist/react.js
→ react/umd/react.development.js
react/dist/react.min.js
→ react/umd/react.production.min.js
react-dom/dist/react-dom.js
→ react-dom/umd/react-dom.development.js
react-dom/dist/react-dom.min.js
→ react-dom/umd/react-dom.production.min.js
ReactDOM.hydrate
instead of ReactDOM.render
if you're reviving server rendered HTML. Keep using ReactDOM.render
if you're just doing client-side rendering.react-with-addons.js
build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.React.createClass
is now available as create-react-class, React.PropTypes
as prop-types, React.DOM
as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See 15.5.0 and 15.6.0 blog posts for instructions on migrating code and automated codemods.document.documentMode
would trigger IE detection in other browsers, breaking change events. (@aweary in #10032)onChange
would not fire with defaultChecked
on radio inputs. (@jquense in #10156)controlList
attribute to DOM property whitelist (@nhunzaker in #9940)console.warn
instead of console.error
. (@flarnie in #9753)React.createClass
. Points users to create-react-class
instead. (@flarnie in #9771)React.DOM
factory helpers. (@nhunzaker in #8356)React.createMixin
helper, which was never used. (@aweary in #8853)style
attribute. (@aweary in #9302)onChange
not firing properly for some inputs. (@jquense in #8575)react
. (@flarnie in #9919)isMounted()
to return true
in componentWillUnmount
. (@mridgway in #9638)react-addons-update
to not depend on native Object.assign
. (@gaearon in #9937)create-react-class
. (@gaearon in #9933)react-linked-input
. (@gaearon in #9766)react-addons-(css-)transition-group
to the new package. (@gaearon in #9937)Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.
Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.
Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.
React.createClass
. Points users to create-react-class instead. (@acdlite in d9a4fa4)React.PropTypes
. Points users to prop-types instead. (@acdlite in 043845c)ReactDOM
together with ReactDOMServer
. (@wacii in #9005)react-dom/test-utils
, which exports the React Test Utils. (@bvaughn)componentWillUnmount
was not called for children. (@gre in #8512)react-test-renderer/shallow
, which exports the shallow renderer. (@bvaughn)peerDependencies
so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)React.createClass
and React.PropTypes
(@acdlite in 12a96b9)react-addons-test-utils
is deprecated. Use react-dom/test-utils
and react-test-renderer/shallow
instead. (@bvaughn)getInitialState
when this.state
is set. (@bvaughn in #8594)aria-
attributes. (@jessebeach in #7744)autofocus
rather than autoFocus
. (@hkal in #7694)String.prototype.split
. (@nhunzaker in #7629)batchedUpdates
API now passes the wrapped function's return value through. (@bgnorlov in #7444)Simulate.click()
on a <input disabled onClick={foo} />
then foo
will get called whereas it didn't before. (@nhunzaker in #7642)ReactTestRenderer.create()
now accepts {createNodeMock: element => mock}
as an optional argument so you can mock refs with snapshot testing. (@Aweary in #7649, #8261)playsInline
to supported HTML attributes. (@reaperhulk in #7519)as
to supported HTML attributes. (@kevinslin in #7582)preventDefault()
in Synthetic Events. (@g-palmer in #7411)onSelect
implementation. (@AgtLucas in #7533)document.documentMode
checks to handle Google Tag Manager. (@SchleyB in #7594)document.createEvent
. (@Andarist in #7621)dangerouslySetInnerHTML
and SVG in Internet Explorer. (@zpao in #7618)React.Children.only
. (@spicyj in #7514)<input>
validation warning from browsers when changing type
. (@nhunzaker in #7333)stopPropagation()
in Synthetic Events. (@nhunzaker in #7343)<input>
elements in mobile browsers. (@keyanzhang in #7397)<input type="range">
values not updating when changing min
or max
. (@troydemonbreun in #7486)trackedTouchCount
invariant into a console.error for better reliability. (@yungsters in #7400)React.PureComponent
- a new base class to extend, replacing react-addons-pure-render-mixin
now that mixins don't work with ES2015 classes. (@spicyj in #7195)this.props.children
. (@jimfb in #7001)oneOf
and oneOfType
PropTypes sooner. (@troydemonbreun in #6316)PropTypes.element
warning. (@alexzherdev in #7319)setState
warning. (@keyanzhang in #7326)xmlns
, xmlnsXlink
to supported SVG attributes. (@salzhrani in #6471)referrerPolicy
to supported HTML attributes. (@Aweary in #7274)<input type="range">
initial value being rounded. (@troydemonbreun in #7251)npm install react-test-renderer
. (@spicyj in #6944, #7258, @iamdustan in #7362)unstable_renderSubtreeIntoContainer
so that context properly updates when linked to state. (@gaearon in #7125)value
-less submit and reset inputs removing the browser-default text. (@zpao in #7197)name
attribute being added to inputs when not provided. (@okonet in #7199)React.PropTypes.symbol
to support ES2015 Symbols as props. (@puradox in #6377)onLoad
handling to <link>
element. (@roderickhsiao in #6815)onError
handling to <source>
element. (@wadahiro in #6941)value
and defaultValue
more accurately in the DOM. (@jimfb in #6406)Object.prototype
. (@Weizenlol in #6886)is="null"
ended up in the DOM in Firefox. (@darobin in #6896)dangerouslySetInnerHTML
and SVG in Internet Explorer. (@joshhunt in #6982)<textarea>
placeholders. (@jimfb in #7002)<input type="radio"/>
. (@jimfb in #7003)<select>
components behave the same on initial render as they do on updates. (@yiminghe in #5362)isRunning()
API. (@nfcampos in #6763)null
node. (@keyanzhang in #6958)object-assign
, which has protection against a non-spec-compliant native Object.assign
. (@zpao in #6681)props
objects passed to createElement
must be plain objects. (@richardscarrott in #6134)onScroll
event handler with server rendering. (@Aweary in #6678)<object>
nodes from being able to read <param>
nodes in IE. (@syranide in #6691)merge
utility. (@sebmarkbage in #6634)componentWillUnmount
is only called once. (@jimfb in #6613)<option>
s are correctly selected when inside <optgroup>
. (@trevorsmith in #6442)<body>
elements are caught when warning for invalid markup. (@keyanzhang in #6469)scryRenderedDOMComponentsWithClass
better. (@ipeters90 in #6529)document.createElement
instead of generating HTML. Previously we would generate a large string of HTML and then set node.innerHTML
. At the time, this was decided to be faster than using document.createElement
for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using createElement
we can make other parts of React faster. (@spicyj in #5205)data-reactid
is no longer on every node. As a result of using document.createElement
, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the data-reactid
attribute). Root nodes will have a data-reactroot
attribute and server generated markup will still contain data-reactid
. (@spicyj in #5205)<span>
s. ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these <span>
s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. (@mwiencek in #5753)null
now uses comment nodes. Previously null
would render to <noscript>
elements. We now use comment nodes. This may cause issues if making use of :nth-child
CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ()@spicyj in #5451)null
. We added support for defining stateless components as functions in React 0.14. However, React 0.14 still allowed you to define a class component without extending React.Component
or using React.createClass()
, so we couldn’t reliably tell if your component is a function or a class, and did not allow returning null
from it. This issue is solved in React 15, and you can now return null
from any component, whether it is a class or a function. (@jimfb in #5884)React.DOM
element helper, but JSX and React.createElement
work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please let us know in this issue. (@zpao in #6243)<span>
s.React.cloneElement()
now resolves defaultProps
. We fixed a bug in React.cloneElement()
that some components may rely on. If some of the props
received by cloneElement()
are undefined
, it used to return an element with undefined
values for those props. We’re changing it to be consistent with createElement()
. Now any undefined
props passed to cloneElement()
are resolved to the corresponding component’s defaultProps
. (@truongduy134 in #5997)ReactPerf.getLastMeasurements()
is opaque. This change won’t affect applications but may break some third-party tools. We are revamping ReactPerf
implementation and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of ReactPerf.getLastMeasurements()
an opaque data structure that should not be relied upon. (@gaearon in #6286)These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
React
top-level export: findDOMNode
, render
, renderToString
, renderToStaticMarkup
, and unmountComponentAtNode
. As a reminder, they are now available on ReactDOM
and ReactDOMServer
. (@jimfb in #5832)batchedUpdates
and cloneWithProps
. (@jimfb in #5859, @zpao in #6016)setProps
, replaceProps
, and getDOMNode
. (@jimfb in #5570)react/addons
entry point is removed. As a reminder, you should use separate react-addons-*
packages instead. This only applies if you use the CommonJS builds. (@gaearon in #6285)children
to void elements like <input>
was deprecated, and now throws an error. (@jonhester in #3372)refs
(e.g. this.refs.div.props
) were deprecated, and are removed now. (@jimfb in #5495)Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
LinkedStateMixin
and valueLink
are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: react-linked-input. (@jimfb in #6127)<input value={null}>
as a request to clear the input. However, React 0.14 has been ignoring value={null}
. React 15 warns you on a null
input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined
to make the input uncontrolled. (@antoaravinth in #5048)ReactPerf.printDOM()
was renamed to ReactPerf.printOperations()
, and ReactPerf.getMeasurementsSummaryMap()
was renamed to ReactPerf.getWasted()
. (@gaearon in #6287)px
automatically. This version now warns in this case (ex: writing style={{'{{'}}width: '300'}}
. Unitless number values like width: 300
are unchanged. (@pluma in #5140)ref
and key
from the props. (@prometheansacrifice in #5744)props
object to super()
in the constructor. (@prometheansacrifice in #5346)setState()
inside getChildContext()
. (@raineroviir in #6121)onclick
which should be onClick
. (@ali in #5361)NaN
values in style
. (@jontewks in #5811)value
and defaultValue
for an input. (@mgmcdermott in #5823)onFocusIn
or onFocusOut
handlers as they are unnecessary in React. (@jontewks in #6296)ReactDOM.render()
, this.setState()
, or this.forceUpdate()
. (@conorhastings in #5193 and @gaearon in #6310)TestUtils.Simulate()
now prints a helpful message if you attempt to use it with shallow rendering. (@conorhastings in #5358)arrayOf()
and objectOf()
provide better error messages for invalid arguments. (@chicoxyzzy in #5390)componentWillReceiveProps()
lifecycle method is now consistently called when context
changes. (@milesj in #5787)React.cloneElement()
doesn’t append slash to an existing key
when used inside React.Children.map()
. (@ianobermiller in #5892)cite
and profile
HTML attributes. (@AprilArcus in #6094 and @saiichihashimoto in #6032)cssFloat
, gridRow
and gridColumn
CSS properties. (@stevenvachon in #6133 and @mnordick in #4779)borderImageOutset
, borderImageWidth
, borderImageSlice
, floodOpacity
, strokeDasharray
, and strokeMiterlimit
as unitless CSS properties. (@rofrischmann in #6210 and #6270)onAnimationStart
, onAnimationEnd
, onAnimationIteration
, onTransitionEnd
, and onInvalid
events. Support for onLoad
has been added to object
elements. (@tomduncalf in #5187, @milesj in #6005, and @ara4n in #5781)href={null}
) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. (@syranide in #1510)children
to strings for Web Components. (@jimfb in #5093)<use>
events. (@edmellum in #5720)<select>
is unmounted while its onChange
handler is executing. (@sambev in #6028)ref
. (@yiminghe in #6095)Object.is
is used in a number of places to compare values, which leads to fewer false positives, especially involving NaN
. In particular, this affects the shallowCompare
add-on. (@chicoxyzzy in #6132)### Other improvements
loose-envify
instead of envify
so it installs less transitive dependencies. (@qerub in #6303)getMountedInstance()
. (@glenjamin in #4918)render()
. (@simonewebdesign in #5411)Object.create
and Object.freeze
in older environments. It still, however, requires ES5 shims in those environments. (@dgreensp in #4959)data-
attributes with names that start with numbers. (@nLight in #5216)suppressContentEditableWarning
prop for components like Draft.js that intentionally manage contentEditable
children with React. (@mxstbr in #6112)createClass()
on complex specs. (@spicyj in #5550)<option>
tags when using dangerouslySetInnerHTML
setState
in componentWillMount
when using shallow renderingfbjs
dependency to pick up change affecting handling of undefined document.autoCapitalize
and autoCorrect
props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility<select>
elements not handling updates properly.printDOM()
nonce
attribute for <script>
and <style>
elementsreversed
attribute for <ol>
elementsreact-dom-server.js
to expose renderToString
and renderToStaticMarkup
for usage in the browserintegrity
attributechildren
prop being coerced to a string for custom elements, which was not the desired behaviorreact
from dependencies
to peerDependencies
to match expectations and align with react-addons-*
packagesdangerouslySetInnerHTML
with Closure Compiler Advanced modesrcLang
, default
, and kind
attributes for <track>
elementscolor
attribute.props
access on DOM nodes is updated on re-rendersscryRenderedDOMComponentsWithClass
so it works with SVG0
to be used as a timeout valuereact-dom.js
to main
to improve compatibility with toolingclipPath
element and attribute for SVGdangerouslySetInnerHTML
restrictions so {__html: undefined}
will no longer throwgetChildContext
replaceState(obj)
retains prototype of obj
contextTypes
strokeDashoffset
, flexPositive
, flexNegative
to the list of unitless CSS propertiesscoped
- for <style>
elementshigh
, low
, optimum
- for <meter>
elementsunselectable
- IE-specific property to prevent user selectionstyle={null}
didn't properly update style
uglify
dependency to prevent a bug in IE8hasOwnProperty
as an object key<select>
elementsstyle
works when transitioning from null
getDOMNode
for ES6 classes<html>
, <head>
, <body>
) are treated as DOM components--non-strict-es6module
props
after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutatedstatics
) are no longer autobound to the component classref
resolution order has changed slightly such that a ref to a component is available immediately after its componentDidMount
method is called; this change should be observable only if your component calls a parent component's callback within your componentDidMount
, which is an anti-pattern and should be avoided regardlesssetState
in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.setState
and forceUpdate
on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.this._pendingState
and this._rootNodeID
.React.findDOMNode(component)
, which should be used in place of component.getDOMNode()
. The base class for ES6-based components will not have getDOMNode
. This change will enable some more patterns moving forward.React.cloneElement(el, props)
for making copies of React elements – see the v0.13 RC2 notes for more details.ref
style, allowing a callback to be used in place of a name: <Photo ref={(c) => this._photo = c} />
allows you to reference the component with this._photo
(as opposed to ref="photo"
which gives this.refs.photo
).this.setState()
can now take a function as the first argument for transactional state updates, such as this.setState((state, props) => ({count: state.count + 1}));
– this means that you no longer need to use this._pendingState
, which is now gone.ComponentClass.type
is deprecated. Just use ComponentClass
(usually as element.type === ComponentClass
).createClass
-based components are removed or deprecated from ES6 classes (getDOMNode
, replaceState
, isMounted
, setProps
, replaceProps
).React.addons.createFragment
was added for adding keys to entire sets of children.React.addons.classSet
is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.React.addons.cloneWithProps
can be migrated to use React.cloneElement
instead – make sure to merge style
and className
manually if desired.class
methods are no longer enumerable by default, which requires Object.defineProperty
; if you support browsers such as IE8, you can pass --target es3
to mirror the old behavior--target
option is available on the jsx command, allowing users to specify and ECMAScript version to target.
es5
is the default.es3
restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg this.static
will become this['static']
for IE8 compatibility).>
or }
when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The jsx_orphaned_brackets_transformer
package on npm can be used to find and fix potential issues in your JSX code.formAction
, formEncType
, formMethod
, formTarget
, marginHeight
, marginWidth
strokeOpacity
to the list of unitless CSS propertiesundefined
to React.createElement
- now there is a useful warningdisplayName
key
and ref
moved off props object, now accessible on the element directlyReact.__internals
is removed - it was exposed for DevTools which no longer needs accessReact.createFactory
first. This is handled for you when using JSX.{...}
) introduced to deprecate this.transferPropsTo
acceptCharset
, classID
, manifest
React.renderComponent
--> React.render
React.renderComponentToString
--> React.renderToString
React.renderComponentToStaticMarkup
--> React.renderToStaticMarkup
React.isValidComponent
--> React.isValidElement
React.PropTypes.component
--> React.PropTypes.element
React.PropTypes.renderable
--> React.PropTypes.node
React.isValidClass
instance.transferPropsTo
false
from event handlers to preventDefaultReact.createFactory
key={null}
to assign implicit keysevent.getModifierState
as case sensitiveevent.charCode
list
updates correctly nowscrollLeft
, scrollTop
removed, these should not be specified as propsReact.addons.batchedUpdates
added to API for hooking into update cycleReact.addons.update
uses assign
instead of copyProperties
which does hasOwnProperty
checks. Properties on prototypes will no longer be updated correctly.@jsx React.DOM
no longer required{...}
) operator introduced to allow easier use of props<dialog>
element and associated open
attribute<picture>
element and associated media
and sizes
attributesReact.createElement
API in preparation for React v0.12
React.createDescriptor
has been deprecated as a result<picture>
is now parsed into React.DOM.picture
esprima
and jstransform
for correctness fixesjsx
executable now exposes a --strip-types
flag which can be used to remove TypeScript-like type annotations
require('react-tools').transform
as stripTypes
setState
can be called inside componentWillMount
in non-DOM environmentsSyntheticMouseEvent.getEventModifierState
correctly renamed to getModifierState
getModifierState
correctly returns a boolean
getModifierState
is now correctly case sensitiveinnerHTML
workaround is now removed, fixing rerendering in certain casesgetDefaultProps()
is now called once per class and shared across all instancesMyComponent()
now returns a descriptor, not an instanceReact.isValidComponent
and React.PropTypes.component
validate descriptors, not component instancespropType
validators should return an Error
instead of logging directlynull
e.key
and e.getModifierState()
propertiesonBeforeInput
eventReact.Children.count
has been added as a helper for counting the number of childrene.view
properly normalizedcoords
, crossOrigin
, download
, hrefLang
, mediaGroup
, muted
, scrolling
, shape
, srcSet
, start
, useMap
)className
on a mounted SVG component now works correctlymask
and tspan
dx
, dy
, fillOpacity
, fontFamily
, fontSize
, markerEnd
, markerMid
, markerStart
, opacity
, patternContentUnits
, patternUnits
, preserveAspectRatio
, strokeDasharray
, strokeOpacity
Webkit
, ms
, Moz
, O
) are now handled properlyimg
event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same data-reactid
"$apply
command to transform valuesdist/
.envify
is properly listed as a dependency instead of a peer dependency<Components.Checkbox />
harmony
features available in the command line with <script type="text/jsx;harmony=true">
--harmony
option--source-map-inline
option to the jsx
executabletransformWithDetails
API which gives access to the raw sourcemap datadata-reactid
, data-react-checksum
). This DOM will not be mountable by React. Read the docs for React.renderComponentToStaticMarkup
srcSet
for <img>
to specify images at different pixel ratiostextAnchor
for SVGclassName={false}
behaves consistentlythis.refs
is defined, even if no refs are specified.update
function to deal with immutable data. Read the docstransform
function. The only option supported is harmony
, which behaves the same as jsx --harmony
on the command line. This uses the ES6 transforms from jstransform.This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
We've also added to the add-ons build React.addons.TestUtils, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
We've also made several other improvements and a few breaking changes; the full changelog is provided below.
In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
<div>
Monkeys:
{listOfMonkeys} {submitButton}
</div>
In v0.8 and below, it was transformed to the following:
React.DOM.div(null,
" Monkeys: ",
listOfMonkeys, submitButton
)
In v0.9, it will be transformed to this JS instead:
React.DOM.div(null,
"Monkeys:",
listOfMonkeys, " ", submitButton
)
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write {'Monkeys: '}
or Monkeys:{' '}
in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can install jsx_whitespace_transformer from npm and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
componentDidMount
and componentDidUpdate
no longer receive the root node as a parameter; use this.getDOMNode()
insteadundefined
, the default value returned by getDefaultProps
will now be used insteadReact.unmountAndReleaseReactRootNode
was previously deprecated and has now been removedReact.renderComponentToString
is now synchronous and returns the generated HTML string<html>
tag using React) is now supported only when starting with server-rendered markupdeltaY
is no longer negatedinput
, select
, and textarea
elements, .getValue()
is no longer supported; use .getDOMNode().value
insteaddefs
, linearGradient
, polygon
, radialGradient
, stop
crossOrigin
for CORS requestsdownload
and hrefLang
for <a>
tagsmediaGroup
and muted
for <audio>
and <video>
tagsnoValidate
and formNoValidate
for formsproperty
for Open Graph <meta>
tagssandbox
, seamless
, and srcDoc
for <iframe>
tagsscope
for screen readersspan
for <colgroup>
tagspropTypes
in mixinsany
, arrayOf
, component
, oneOfType
, renderable
, shape
to React.PropTypes
statics
on component spec for static component methods.currentTarget
is now properly set.key
is now polyfilled in all browsers for special (non-printable) keys.clipboardData
is now polyfilled in IE.dragTransfer
is now presentonMouseOver
and onMouseOut
in addition to the existing onMouseEnter
and onMouseLeave
eventsonLoad
and onError
on <img>
elementsonReset
on <form>
elementsautoFocus
attribute is now polyfilled consistently on input
, select
, and textarea
__owner__
property to each component's props
object; passed-in props are now never mutatedReact.renderComponent
within componentDidMount
), events now properly bubble to the parent component.target
, .relatedTarget
, and .type
are now set properly.data
is now properly normalized in IE9 and IE10px
appended for the unitless properties columnCount
, flex
, flexGrow
, flexShrink
, lineClamp
, order
, widows
componentWillUnmount
handlerrenderComponentToString
would store event handlersdisabled
are rendered without a value (previously disabled="true"
, now simply disabled
)key
values containing .
are now supporteddata-reactid
values for performancekey
property changesdocument
only when necessary, improving performance in some cases.returnValue
in modern browsers, eliminating a warning in ChromescrollLeft
and scrollTop
are no longer accessed on document.body, eliminating a warning in ChromeReact.addons.TestUtils
was added to help write unit testsReact.addons.TransitionGroup
was renamed to React.addons.CSSTransitionGroup
React.addons.TransitionGroup
was added as a more general animation wrapperReact.addons.cloneWithProps
was added for cloning components and modifying their propstransitionLeave
in CSSTransitionGroup<input>
elements, checkedLink
is now supported for two-way bindingreact-tools
npm package no longer includes the React core libraries; use the react
package instead.displayName
is now added in more cases, improving error messages and names in the React Dev ToolsJSXTransformer
now uses source maps automatically in modern browsersJSXTransformer
error messages now include the filename and problematic line contents when a file fails to parseNow installable via npm!
$ npm install react
rows
& cols
for <textarea>
defer
& async
for <script>
loop
for <audio>
& <video>
autoCorrect
for form fields (a non-standard attribute only supported by mobile WebKit)onContextMenu
eventsonTransition
jstransform
and esprima-fb
Security release to address CVE-2013-7035.
Security release to address CVE-2013-7035.
<input type="range">
and selection events.disabled
attribute handling on non-<input>
elements.charSet
, content
, form
, httpEquiv
, rowSpan
, autoCapitalize
).rx
, ry
).getInitialState
and getDefaultProps
in mixins.React.version
.React.isValidClass
- Used to determine if a value is a valid component constructor.React.autoBind
- This was deprecated in v0.4 and now properly removed.React.unmountAndReleaseReactRootNode
to React.unmountComponentAtNode
.class
to className
as part of the transform! This is a breaking change - if you were using class
, you must change this to className
or your components will be visually broken.setState
callbacks are now executed in the scope of your component.click
events now work on Mobile Safari.Object.prototype
is extended."undefined"
on update when previously defined.<iframe>
attributes.id
attribute to data-reactid
to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.<canvas>
)React.renderComponentToString(<component>, callback)
allows you to use React on the server and generate markup which can be sent down to the browser.prop
improvements: validation and default values. Read our blog post for details...key
prop, which allows for finer control over reconciliation. Read the docs for details...React.autoBind
. Read our blog post for details...<input>
, <textarea>
, <option>
, and <select>
in order to standardize many inconsistencies in browser implementations. This includes support for defaultValue
, and improved implementation of the onChange
event, and circuit completion. Read the docs for details...this.setState
now takes an optional callback as it's second parameter. If you were using onClick={this.setState.bind(this, state)}
previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.<div>{/* this is a comment and won't be rendered */}</div>
<div><Component1/><Component2/></div>
is transformed into React.DOM.div(null, Component1(null), Component2(null))
.
Previously this would be transformed into React.DOM.div(null, [Component1(null), Component2(null)])
.
If you were using React without JSX previously, your code should still work.require()
s to be relative unless specifiedThis release addresses some small issues people were having and simplifies our tools to make them easier to use.
require
statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of bin/jsx
.React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);
will work now.Initial public release