Multiple React instances per DOM (when using AMD for example)

[sennett]

When using AMD, a component might use React as a dependency. This poses a problem when another instance of React has already manipulated the DOM. The wrong events get fired, or ID collisions occur (Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0).

jsbin here: http://jsbin.com/riqotavoxa/11/edit?js,output
SO here for internet points: http://stackoverflow.com/q/28685857/614523
Google Group post here: https://groups.google.com/forum/#!topic/reactjs/RRDUaF19CM0

[sennett]

If I may be so bold, I see two ways forward. Either each React knows about other instances of React through something global (it's operating over the entire DOM after all) or each React instance creates its own random root key in getReactRootIDString similar.

[gaearon]

Is this #2402?

[sennett]

I did not see that one.

It is similar, but where they just want a warning (that they can presumably act upon by removing one of the Reacts they mistakenly loaded), there are scenarios where multiple React instances operating over the same DOM (but not component tree) are required.

[gaearon]

there are scenarios where multiple React instances operating over the same DOM (but not component tree) are required.

I don't understand. What is the use case for this?

[glenjamin]

there are scenarios where multiple React instances operating over the same DOM (but not component tree) are required.

I don't understand. What is the use case for this?

The cases I've seen are usually around addons or 3rd-party widgets/scripts.

[sennett]

What is the use case for this?

Mine is UI composition via AMD, but it could be something like two separate CommonJS bundles on a page (possibly - I don't use CommonJS), or widgets.

[charypar]

The other issue with this is you can't reliably use the dependency injection mechanism, e.g. to change the batching strategy, while using components from multiple modules where each has it's own instance of React as a dependency. Even if they are the same version of React.

(originally posted here, sorry for the duplicate comment: #2402 (comment))

[nottoseethesun]

+1

[xarlio]

+1

[Macil]

I'm interested in using React from inside Chrome extensions to add stuff to pages (that may or may not be using React themselves). Chrome extensions share the DOM but don't share the javascript context with the page, so I guess this falls under "multiple React instances operating over the same DOM (but not component tree)".

[sedge]

+1

[sedge]

@charypar said: "The other issue with this is you can't reliably use the dependency injection mechanism, e.g. to change the batching strategy, while using components from multiple modules where each has it's own instance of React as a dependency. Even if they are the same version of React."

This.

[Robert-W]

+1 Seeing similar issue in many places with the error being shown from #2402, I have to write in AMD since our company uses Esri's JavaScript API, which heavily relies on Dojo. I have one module which creates a component and returns the result of React.createClass. Somewhere else in the app we will call React.render(<MyComponent />, someNode); and it throws the multiple instances error. I can get around this by returning something like

return function (node, props) {

/* jshint ignore:start /

return React.render(<MyComponent />, document.getElementById(node));

/ jshint ignore:end */

};

Also seeing it occasionally in jasmine-node when calling TestUtils.renderIntoDocument

Note: I noticed this started when upgrading to React 0.13.1

[zbyte64]

+1 noticed this in nodejs, calling a renderToStaticMarkup from one package on react components from another package.

[fourcube]

+1

[YPCrumble]

+1

[mathieumg]

+1

[zpao]

Yea, closing. This is the same as other issues mentioned.

[sennett]

@zpao what issue is this now tracked under please?

[zpao]

#2402