Change:
Right now, we copy it in one of the hottest paths of React to allow users to mutate the style object afterward. I've come to realize that this pattern doesn't come up that often, since the style's often created inline inside and not retained after that. Additionally, is coming soon, so people could always clone the style themselves if there's the need.
You could start with a dev-only warning() if you're concerned about breaking stuff.
Would be extremely nice, especially since we're going to make a push to get more people to use inline styles in the future
Really? From my tests, it would seem that it would be a performance nightmare.
it's certainly nice if it was possible. I think there are some tricks to make this performant enough.

Discussion:
var invariant = require('invariant'); var isEventSupported = require('isEventSupported'); var keyOf = require('keyOf'); <ins> var shallowEqual = require('shallowEqual'); </ins> var validateDOMNesting = require('validateDOMNesting'); var warning = require('warning');

var ELEMENT_NODE_TYPE = 1; <ins> var styleMutationWarning = {}; function checkAndWarnForMutatedStyle(style1, style2, component) { if (style1 == null || style2 == null) { return; } if (shallowEqual(style1, style2)) { return; } var componentName = component._tag; var owner = component._currentElement._owner; var ownerName; if (owner) { ownerName = owner.getName(); } var hash = ownerName + '|' + componentName; if (styleMutationWarning.hasOwnProperty(hash)) { return; } styleMutationWarning[hash] = true; warning( false, '`%s` was passed a style object that has previously been mutated. ' + 'Mutating `style` will be deprecated. Consider cloning it beforehand. ' + 'Check the `render` %s. Previous style: %s. Mutated style: %s.', componentName, owner ? 'of `' + ownerName + '`' : 'using <' + componentName + '>', JSON.stringify(style1), JSON.stringify(style2) ); } </ins> /** * Optionally injectable operations for mutating the DOM */

validateDangerousTag(tag); this._tag = tag; this._renderedChildren = null; <ins> this._previousStyle = null; </ins> this._previousStyleCopy = null; this._rootNodeID = null; }

} else { if (propKey === STYLE) { if (propValue) { <ins> if (__DEV__) { // See `_updateDOMProperties`. style block this._previousStyle = propValue; } </ins> propValue = this._previousStyleCopy = assign({}, props.style); } propValue = CSSPropertyOperations.createMarkupForStyles(propValue);

} if (propKey === STYLE) { if (nextProp) { <ins> if (__DEV__) { checkAndWarnForMutatedStyle( this._previousStyleCopy, this._previousStyle, this ); this._previousStyle = nextProp; } </ins> nextProp = this._previousStyleCopy = assign({}, nextProp); } if (lastProp) {

expect(stubStyle.fontFamily).toEqual(''); }); <ins> // TODO: (poshannessy) deprecate this pattern. </ins> it("should update styles when mutating style object", function() { <ins> // not actually used. Just to suppress the style mutation warning spyOn(console, 'error'); </ins> var styles = {display: 'none', fontFamily: 'Arial', lineHeight: 1.2}; var container = document.createElement('div'); React.render(<div style={styles} />, container);

expect(stubStyle.lineHeight).toBe(''); }); <ins> it('should warn when mutating style', function() { spyOn(console, 'error'); var style = {border: '1px solid black'}; var App = React.createClass({ getInitialState: function() { return {style: style}; }, render: function() { return <div style={this.state.style}>asd</div>; } }); var stub = ReactTestUtils.renderIntoDocument(<App />); style.position = 'absolute'; stub.setState({style: style}); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toEqual( 'Warning: `div` was passed a style object that has previously been ' + 'mutated. Mutating `style` will be deprecated. Consider cloning it ' + 'beforehand. Check the `render` of `App`. Previous style: ' + '{"border":"1px solid black"}. Mutated style: ' + '{"border":"1px solid black","position":"absolute"}.' ); style = {background: 'red'}; stub = ReactTestUtils.renderIntoDocument(<App />); style.background = 'green'; stub.setState({style: {background: 'green'}}); // already warned once for the same component and owner expect(console.error.argsForCall.length).toBe(1); style = {background: 'red'}; var div = document.createElement('div'); React.render(<span style={style}></span>, div); style.background = 'blue'; React.render(<span style={style}></span>, div); expect(console.error.argsForCall.length).toBe(2); }); </ins> it("should update styles if initially null", function() { var styles = null; var container = document.createElement('div');

expect(stubStyle.color).toEqual(''); }); <ins> // trouble </ins> it("should update styles when 'style' changes from null to object", function() { var container = document.createElement('div'); var styles = {color: 'red'};