how to manage simultaneous DOM modification

Question

I am new to react and flux. I have a web application which I need to develop using react and flux partially. However, there is an other third party engine which gets connected with application and manipulates the DOM of the web page using plain javascript without react.

So, as the react based component creation deals with virtual dom concept, there are problems with simultaneous DOM modification. Can anyone please suggest me how to manage dom modifications by both React and third party engine at a time.

Answer 1

You can look into the React Component lifecycle method shouldComponentUpdate() to decide who should be responsible for rendering the DOM.

For example, if you want to let the third part engine to completely take over the rendering of your React component after the initial rendering, you can implement the shouldComponentUpdate() to explicitly return false.

shouldComponentUpdate: function(nextProps, nextState) {
    return false;
}