« Changelog History


react v0.13.0 Release Notes

Release Date: 2015-03-10 // about 9 years ago

  • React Core

    💥 Breaking Changes

    • 🗄 Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
    • 🐎 Mutating 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 mutated
    • Static methods (defined in statics) are no longer autobound to the component class
    • ref 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 regardless
    • 🔀 Calls to setState 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.
    • Access to most internal properties has been completely removed, including this._pendingState and this._rootNodeID.

    🆕 New Features

    • 👌 Support for using ES6 classes to build React components; see the v0.13.0 beta 1 notes for details.
    • ➕ Added new top-level API 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.
    • ➕ Added a new top-level API React.cloneElement(el, props) for making copies of React elements – see the v0.13 RC2 notes for more details.
    • New 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.
    • 👌 Support for iterators and immutable-js sequences as children.

    🗄 Deprecations

    • 🗄 ComponentClass.type is deprecated. Just use ComponentClass (usually as element.type === ComponentClass).
    • 🚚 Some methods that are available on createClass-based components are removed or deprecated from ES6 classes (getDOMNode, replaceState, isMounted, setProps, replaceProps).

    React with Add-Ons

    🆕 New Features

    🗄 Deprecations

    • 📦 React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.
    • 💅 Calls to React.addons.cloneWithProps can be migrated to use React.cloneElement instead – make sure to merge style and className manually if desired.

    React Tools

    💥 Breaking Changes

    • 0️⃣ When transforming ES6 syntax, 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

    🆕 New Features

    • --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).
    • The transform for the call spread operator has also been enabled.

    JSXTransformer

    💥 Breaking Changes

    • The return value of transform now contains sourceMap as a JS object already, not an instance of SourceMapGenerator.

    JSX

    💥 Breaking Changes

    • A change was made to how some JSX was parsed, specifically around the use of > 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.