Can I force react not to update dom between class renders?

[blainekasten]

Here's my problem.

Using react-router 1.0, i'm going to be re-rendering trees that are 90% the same. We use an external lib for an api that produces video mark up. Totally out of our hands. They modify the dom and that's how it has to be.

My problem comes in that when the routing changes, it re-renders the tree, and wipes out the custom DOM put in by the third party api.

I've tried things like returning false from shouldComponentUpdate always.. using dangerouslySetInnerHtml={{__html: ''}} to a blank string hoping that react would internally not do diff's on it.. nothing seems to work.

Is there anything I can do to stop it?

[rpominov]

Related #3965

[jimfb]

@rpominov No, I don't think this is related.

@blainekasten I think you want to have your render function produce an empty div and set the html in the callback ref. The following is untested, but is roughly the idea: <div ref={function(mydiv){ if(mydiv != null) mydiv.innerHTML=mymarkup}} />.

This looks like a usage question, rather than a bug in the React core. Usage questions are better answered on sites like StackOverflow, as we try to use github issues for tracking bugs in the React core. For this reason, I'm going to close out this issue, but feel free to continue the conversation here or move it to StackOverflow.

[rpominov]

@jimfb

No, I don't think this is related.

Right, maybe not. I just thought they have some <Video id={42} /> component that incapsulates custom DOM manipulations, and then they want to reparent an instance of that component preserving custom DOM that was created and its state.

[jimfb]

@rpominov Ah, you're right.

My problem comes in that when the routing changes, it re-renders the tree, and wipes out the custom DOM put in by the third party api.

Does look like a reparenting request (duplicate of #3965). Thanks!

[blainekasten]

I think it is a reparenting request.... Is there any work arounds to pulling off reparenting?

@jimfb I tried your approach. What seems to happen is that on the re-renders the ref function argument is null.. which seems weird. So it's not really working. I did hack around and dive into the react internal instance to get the dom node and set the innerHTML but it's not working either..

[jimfb]

You're trying to reparent some markup that wasn't generated by React. I think you're going to need to do that manually using javascript.

You can probably remove the child node from the tree in componentWillUnmount and save it somewhere (in your flux store or whatever). Then in componentDidMount you can re-insert that node into an empty div when the new component renders. I'm not positive if that would work, but I think it should; that's the approach I'd try next.