React v0.9 RC
This blog site has been archived. Go to react.dev/blog to see the recent posts.
We’re almost ready to release React v0.9! We’re posting a release candidate so that you can test your apps on it; we’d much prefer to find show-stopping bugs now rather than after we release.
The release candidate is available for download from the CDN:
- React
Dev build with warnings: https://fb.me/react-0.9.0-rc1.js
Minified build for production: https://fb.me/react-0.9.0-rc1.min.js - React with Add-Ons
Dev build with warnings: https://fb.me/react-with-addons-0.9.0-rc1.js
Minified build for production: https://fb.me/react-with-addons-0.9.0-rc1.min.js - In-Browser JSX transformer
https://fb.me/JSXTransformer-0.9.0-rc1.js
We’ve also published version 0.9.0-rc1
of the react
and react-tools
packages on npm and the react
package on bower.
Please try these builds out and file an issue on GitHub if you see anything awry.
Upgrade Notes
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 eliminates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like {"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.
Changelog
React Core
Breaking Changes
- The lifecycle methods
componentDidMount
andcomponentDidUpdate
no longer receive the root node as a parameter; usethis.getDOMNode()
instead - Whenever a prop is equal to
undefined
, the default value returned bygetDefaultProps
will now be used instead React.unmountAndReleaseReactRootNode
was previously deprecated and has now been removedReact.renderComponentToString
is now synchronous and returns the generated HTML string- Full-page rendering (that is, rendering the
<html>
tag using React) is now supported only when starting with server-rendered markup - On mouse wheel events,
deltaY
is no longer negated - When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
- On
input
,select
, andtextarea
elements,.getValue()
is no longer supported; use.getDOMNode().value
instead this.context
on components is now reserved for internal use by React
New Features
- React now never rethrows errors, so stack traces are more accurate and Chrome’s purple break-on-error stop sign now works properly
- Added a new tool for profiling React components and identifying places where defining
shouldComponentUpdate
can give performance improvements - Added support for SVG tags
defs
,linearGradient
,polygon
,radialGradient
,stop
-
Added support for more attributes:
noValidate
andformNoValidate
for formsproperty
for Open Graph<meta>
tagssandbox
,seamless
, andsrcDoc
for<iframe>
tagsscope
for screen readersspan
for<colgroup>
tags
- Added support for defining
propTypes
in mixins - Added
any
,arrayOf
,component
,oneOfType
,renderable
,shape
toReact.PropTypes
- Added support for
statics
on component spec for static component methods - On all events,
.currentTarget
is now properly set - On keyboard events,
.key
is now polyfilled in all browsers for special (non-printable) keys - On clipboard events,
.clipboardData
is now polyfilled in IE - On drag events,
.dataTransfer
is now present - Added support for
onMouseOver
andonMouseOut
in addition to the existingonMouseEnter
andonMouseLeave
events - Added support for
onLoad
andonError
on<img>
elements - Added support for
onReset
on<form>
elements - The
autoFocus
attribute is now polyfilled consistently oninput
,select
, andtextarea
Bug Fixes
- React no longer adds an
__owner__
property to each component’sprops
object; passed-in props are now never mutated - When nesting top-level components (e.g., calling
React.renderComponent
withincomponentDidMount
), events now properly bubble to the parent component - Fixed a case where nesting top-level components would throw an error when updating
- Passing an invalid or misspelled propTypes type now throws an error
- On mouse enter/leave events,
.target
,.relatedTarget
, and.type
are now set properly - On composition events,
.data
is now properly normalized in IE9 and IE10 - CSS property values no longer have
px
appended for the unitless propertiescolumnCount
,flex
,flexGrow
,flexShrink
,lineClamp
,order
,widows
- Fixed a memory leak when unmounting children with a
componentWillUnmount
handler - Fixed a memory leak when
renderComponentToString
would store event handlers - Fixed an error that could be thrown when removing form elements during a click handler
key
values containing.
are now supported- Shortened
data-reactid
values for performance - Components now always remount when the
key
property changes - Event handlers are attached to
document
only when necessary, improving performance in some cases - Events no longer use
.returnValue
in modern browsers, eliminating a warning in Chrome scrollLeft
andscrollTop
are no longer accessed on document.body, eliminating a warning in Chrome- General performance fixes, memory optimizations, improvements to warnings and error messages
React with Addons
React.addons.TransitionGroup
was renamed toReact.addons.CSSTransitionGroup
React.addons.TransitionGroup
was added as a more general animation wrapperReact.addons.cloneWithProps
was added for cloning components and modifying their props- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
- Bug fix for changing
transitionLeave
in CSSTransitionGroup - Performance optimizations for CSSTransitionGroup
- On checkbox
<input>
elements,checkedLink
is now supported for two-way binding
JSX Compiler and react-tools Package
- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
- The
react-tools
npm package no longer includes the React core libraries; use thereact
package instead. displayName
is now added in more cases, improving error messages and names in the React Dev Tools- Fixed an issue where an invalid token error was thrown after a JSX closing tag
JSXTransformer
now uses source maps automatically in modern browsersJSXTransformer
error messages now include the filename and problematic line contents when a file fails to parse