react 15.0.0
Major changes
- Initial render now uses
document.createElementinstead of generating HTML. Previously we would generate a large string of HTML and then setnode.innerHTML. At the time, this was decided to be faster than usingdocument.createElementfor the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By usingcreateElementwe can make other parts of React faster. (@spicyj in #5205) data-reactidis no longer on every node. As a result of usingdocument.createElement, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used thedata-reactidattribute). Root nodes will have adata-reactrootattribute and server generated markup will still containdata-reactid. (@spicyj in #5205)- No more extra
<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) - Rendering
nullnow uses comment nodes. Previouslynullwould render to<noscript>elements. We now use comment nodes. This may cause issues if making use of:nth-childCSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ()@spicyj in #5451) - Functional components can now return
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 extendingReact.Componentor usingReact.createClass(), so we couldn’t reliably tell if your component is a function or a class, and did not allow returningnullfrom it. This issue is solved in React 15, and you can now returnnullfrom any component, whether it is a class or a function. (@jimfb in #5884) - Improved SVG support. All SVG tags are now fully supported. (Uncommon SVG tags are not present on the
React.DOMelement helper, but JSX andReact.createElementwork 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)
Breaking changes
- No more extra
<span>s. React.cloneElement()now resolvesdefaultProps. We fixed a bug inReact.cloneElement()that some components may rely on. If some of thepropsreceived bycloneElement()areundefined, it used to return an element withundefinedvalues for those props. We’re changing it to be consistent withcreateElement(). Now anyundefinedprops passed tocloneElement()are resolved to the corresponding component’sdefaultProps. (@truongduy134 in #5997)ReactPerf.getLastMeasurements()is opaque. This change won’t affect applications but may break some third-party tools. We are revampingReactPerfimplementation 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 ofReactPerf.getLastMeasurements()an opaque data structure that should not be relied upon. (@gaearon in #6286)
Removed deprecations
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
- Deprecated APIs are removed from the
Reacttop-level export:findDOMNode,render,renderToString,renderToStaticMarkup, andunmountComponentAtNode. As a reminder, they are now available onReactDOMandReactDOMServer. (@jimfb in #5832) - Deprecated addons are removed:
batchedUpdatesandcloneWithProps. (@jimfb in #5859, @zpao in #6016) - Deprecated component instance methods are removed:
setProps,replaceProps, andgetDOMNode. (@jimfb in #5570) - Deprecated CommonJS
react/addonsentry point is removed. As a reminder, you should use separatereact-addons-*packages instead. This only applies if you use the CommonJS builds. (@gaearon in #6285) - Passing
childrento void elements like<input>was deprecated, and now throws an error. (@jonhester in #3372) - React-specific properties on DOM
refs(e.g.this.refs.div.props) were deprecated, and are removed now. (@jimfb in #5495)
New deprecations, introduced with a warning
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.
LinkedStateMixinandvalueLinkare 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)- Future versions of React will treat
<input value={null}>as a request to clear the input. However, React 0.14 has been ignoringvalue={null}. React 15 warns you on anullinput 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 passundefinedto make the input uncontrolled. (@antoaravinth in #5048) ReactPerf.printDOM()was renamed toReactPerf.printOperations(), andReactPerf.getMeasurementsSummaryMap()was renamed toReactPerf.getWasted(). (@gaearon in #6287)
New helpful warnings
- If you use a minified copy of the development build, React DOM kindly encourages you to use the faster production build instead. (@spicyj in #5083)
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add
pxautomatically. This version now warns in this case (ex: writingstyle={{'{{'}}width: '300'}}. Unitless number values likewidth: 300are unchanged. (@pluma in #5140) - Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. (@kentcdodds in #5940 and @koba04 in #5947)
- Elements will now warn when attempting to read
refandkeyfrom the props. (@prometheansacrifice in #5744) - React will now warn if you pass a different
propsobject tosuper()in the constructor. (@prometheansacrifice in #5346) - React will now warn if you call
setState()insidegetChildContext(). (@raineroviir in #6121) - React DOM now attempts to warn for mistyped event handlers on DOM elements, such as
onclickwhich should beonClick. (@ali in #5361) - React DOM now warns about
NaNvalues instyle. (@jontewks in #5811) - React DOM now warns if you specify both
valueanddefaultValuefor an input. (@mgmcdermott in #5823) - React DOM now warns if an input switches between being controlled and uncontrolled. (@TheBlasfem in #5864)
- React DOM now warns if you specify
onFocusInoronFocusOuthandlers as they are unnecessary in React. (@jontewks in #6296) - React now prints a descriptive error message when you pass an invalid callback as the last argument to
ReactDOM.render(),this.setState(), orthis.forceUpdate(). (@conorhastings in #5193 and @gaearon in #6310) - Add-Ons:
TestUtils.Simulate()now prints a helpful message if you attempt to use it with shallow rendering. (@conorhastings in #5358) - PropTypes:
arrayOf()andobjectOf()provide better error messages for invalid arguments. (@chicoxyzzy in #5390)
Notable bug fixes
- Fixed multiple small memory leaks. (@spicyj in #4983 and @victor-homyakov in #6309)
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. (@jquense in #4051)
- The
componentWillReceiveProps()lifecycle method is now consistently called whencontextchanges. (@milesj in #5787) React.cloneElement()doesn’t append slash to an existingkeywhen used insideReact.Children.map(). (@ianobermiller in #5892)- React DOM now supports the
citeandprofileHTML attributes. (@AprilArcus in #6094 and @saiichihashimoto in #6032) - React DOM now supports
cssFloat,gridRowandgridColumnCSS properties. (@stevenvachon in #6133 and @mnordick in #4779) - React DOM now correctly handles
borderImageOutset,borderImageWidth,borderImageSlice,floodOpacity,strokeDasharray, andstrokeMiterlimitas unitless CSS properties. (@rofrischmann in #6210 and #6270) - React DOM now supports the
onAnimationStart,onAnimationEnd,onAnimationIteration,onTransitionEnd, andonInvalidevents. Support foronLoadhas been added toobjectelements. (@tomduncalf in #5187, @milesj in #6005, and @ara4n in #5781) - React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex:
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) - React DOM does not mistakingly coerce
childrento strings for Web Components. (@jimfb in #5093) - React DOM now correctly normalizes SVG
<use>events. (@edmellum in #5720) - React DOM does not throw if a
<select>is unmounted while itsonChangehandler is executing. (@sambev in #6028) - React DOM does not throw in Windows 8 apps. (@Andrew8xx8 in #6063)
- React DOM does not throw when asynchronously unmounting a child with a
ref. (@yiminghe in #6095) - React DOM no longer forces synchronous layout because of scroll position tracking. (@syranide in #2271)
Object.isis used in a number of places to compare values, which leads to fewer false positives, especially involvingNaN. In particular, this affects theshallowCompareadd-on. (@chicoxyzzy in #6132)- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. (@antoaravinth in #5209)
### Other improvements
- React now uses
loose-envifyinstead ofenvifyso it installs less transitive dependencies. (@qerub in #6303) - Shallow renderer now exposes
getMountedInstance(). (@glenjamin in #4918) - Shallow renderer now returns the rendered output from
render(). (@simonewebdesign in #5411) - React no longer depends on ES5 shams for
Object.createandObject.freezein older environments. It still, however, requires ES5 shims in those environments. (@dgreensp in #4959) - React DOM now allows
data-attributes with names that start with numbers. (@nLight in #5216) - React DOM adds a new
suppressContentEditableWarningprop for components like Draft.js that intentionally managecontentEditablechildren with React. (@mxstbr in #6112) - React improves the performance for
createClass()on complex specs. (@spicyj in #5550)