Invoking renderToStaticMarkup in render() causes refs to break

[masonicboom]

Demonstrated at http://jsfiddle.net/xnhzvdoa/1/; open the error console and you should see this:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

---

var Bug = React.createClass({
    render: function() {
        var html = React.renderToStaticMarkup(React.DOM.img());
        return React.DOM.div({ ref: 'ref' }, html);
    }
});
Bug = React.createFactory(Bug);

React.render(Bug(), document.body);

[jimfb]

cc @sebmarkbage

[zpao]

This doesn't have anything to do with img specifically, but does happen for our faked DOM components (reprod with input). It also has nothing to do with using the return value, just running renderToStaticMarkup makes it happen.

I'm guessing we're screwing up something with currentOwner somewhere along the line.

[masonicboom]

This comment was wrong. Mea culpa. Too much time in coffeescript...

[jimfb]

Your render function is not returning a valid value. You need to return a ReactElement or null for no value. If you add return null; to render method of your new example, the error goes away.

[sophiebits]

The new test case seems wrong (as @JSFB says, it doesn't repro the bug) but the original one is solid.

[zpao]

Yea, the invariant you're seeing there is different. But let's not get hung up too much on the specific example... the ref part of this is the important thing. Returning something with a ref in conjunction with rendering specific things to a string breaks. Add the return of a div with a ref in that example and the error is still there.

[jimfb]

I agree with @zpao

Simplified example slightly to avoid any confusion about any interaction between renderToStaticMarkup and the return value.

var Bug = React.createClass({
    render: function() {
        React.renderToStaticMarkup(React.DOM.img());
        return React.DOM.img({ ref: 'ref2' }, null);
    }
});
Bug = React.createFactory(Bug);

React.render(Bug(), document.body);

renderToStaticMarkup is clearly mutating something in the internals.

[sebmarkbage]

renderToStaticMarkup can have side-effects other than just mutating the owner stack. Components that are instantiated also have life-cycle hooks (constructors, getInitialState and componentWillMount) which may cause side-effects.

The render method is pure and may not cause any side-effects. We should throw the same invariant we do for setState and a bunch of other methods, while you're in a render. This would be a much nicer error message.

The workaround is to renderToStaticMarkup in one of the life-cycles that are allowed to have side-effects. Such as componentWillUpdate and store the result so that it can be used inside render.

[sebmarkbage]

The fix here is to disable this use case.

[zpao]

My gut says that that's lazy. I think we should actually look into renderToStaticMarkup and renderToString and see if we can make those behave better. Short-term… fine, a friendly error message is better than this. But why should generating a string of markup be considered a side effect? (instantiating anything or calling any function can have side effects, so I don't really buy that excuse)