renderComponent without jsx: clone the props object passed in, to avoid pollution

[tommyh]

This issue only manifests when you are using vanilla-js (not-jsx) when making a React.renderComponent call.

Issue: When you pass in an object to renderComponent, that object is mutated with the props. So if you try to use that object again to render a different component, the props from the first component will pollute the props in the second component.

Example code:

var Hello = React.createClass({
    getDefaultProps: function(){
        return {
            randomNumber: Math.random()
        };
    },
    render: function() {
        return <div>{this.props.name}: {this.props.randomNumber}</div>;
    }
});

var configData = {
    foo: "bar"
};

configData.name = "Example1";
React.renderComponent(Hello(configData), document.getElementById("example1"));

configData.name = "Example2";
React.renderComponent(Hello (configData), document.getElementById("example2"));

The this.props.randomNumber from the first component will get carried to the second component because configData will be mutated.

Example of this code: http://jsfiddle.net/ZeNLA/3/

I asked this in reactjs irc, and here was the response:

[16:01] <@zpao> tommyh: it's a good question. one of the ways we keep React fast is to avoid clones when possible
[16:02] <@zpao> cloning here will be really expensive since this is such a common task. BUT it's not outrageous...
[16:05] <tommyh> yeah.  i figure most people use jsx so it's not an issue, but as its not a "mandatory dependency" it would be a bit of a narly issue to get stung by
[16:05] <tommyh> and i can definetly code around it, just thought i'd get your guys thoughts on it
[16:06] <@zpao> thanks for bringing it up... if you could file an issue too where we could discuss this with other people too, that would be helpdful

[sophiebits]

Since we already have the object in getDefaultProps, why not copy items onto that object instead of the other way around? (i.e., this.props = copyProperties(defaultProps, props); (what's the difference between copyProperties and mergeInto?)).

We also need to stop putting __owner__ on props. Maybe I can open a diff for that -- IIRC it's pretty easy now that we use receiveComponent.

[onethread]

Should this be re-opened since it looks like the changes were reverted? I'm getting a similar issue, whether or not JSX is used.

http://jsfiddle.net/g28ubjtb/1/

Obviously not a real world example, but in my case, I have a complex component with a multitude of options (it's a charting module), so I need to be able to pass in config objects, and I'm definitely seeing some crosstalk with the props between different instances. Is there a workaround that anyone can recommend?

Edit: Actually, I see my problem. I should probably be using state.