The latest and greatest version of React.js is here in the form of version 0.13. With the latest release comes a plethora of great and potentially application breaking changes. This isn’t a definitive guide, just more of a brief post explaining some of the biggest changes in React.js.
ES6 Support
During the beta phase of 0.13 which I have been using for some time now, I absolutely loved the ES6 support aspect. Being able to write ES6 classes for React components just feels so damn right. The only downside is of course using ES6 classes means you cannot currently use mixins, I rarely use mixins anyway, so this was not really an issue for me.
The eventual goal of the React.js development team is to deprecate and remove support for writing non ES6 components, but for now React.createClass will remain a first-class citizen of React.js. Once the team work out a nice solution for supporting mixins in React.js ES6 classes, it will open up new opportunities for developers to write cleaner and easier to read code. We most likely will see mixins added in the form of class decorators, where we extend our class object with our mixin.
It is worth noting various API methods still supported on the React.createClass method of creating components are deprecated or removed when using ES6 classes; getDOMNode, replaceState, isMounted, setProps and replaceProps.
Immutable Props
With 0.13 comes a few changes with the goal of making faster React components. Mutating props in your React components is now deprecated, meaning if you attempt to change your props from the time the value is passed in until the point of render, a warning will be thrown.
Ensuring your props are immutable has been a recommended practice from the React team for some time now and those who have been using React.js for a while know this is crucial to performant applications using React. Going forward further performance optimisations can be added to the React core as it will be assumed your props are immutable.
Batched setState
Another VERY welcome addition to React is batched setState calls within React lifecycle methods. This means setState calls are now asynchronous instead of the first call upon the component being mounted being synchronous.
Goodbye component.getDOMNode
To support ES6 based patterns going forward, the React team have added in a new method React.findDOMNode(component) which is to be used in place of component.getDOMNode(). The base class for ES6 React components will NOT have the method getDOMNode due to the way classes work.
New API method: React.cloneElement(el, props)
Added in 0.13 is a new API method for cloning React components. This is once again another welcome addition, as it allows us to clone a component and preserve its ref. This means children can no longer steal a reference from their ancestors (bad children). This was one of the biggest complaints developers had especially when using a map to iterate over multiple components.
You can check out the full changelog here.
