CODEWITHSUNDEEP
reactjs
Gurpreet Balgir
Gurpreet Balgir

Reputation: 3

How does Virtual DOM get updated when DOM is updated by jQuery or some library other than React?

Example: If project is using both jQuery and React for some reason and I try to delete a node in DOM, how does VDOM gets notified of the change?

Upvotes: 0

Views: 797

Answers (1)

Daniel
Daniel

Reputation: 555

React won't be aware of those updates. Although if you run into another re-render, react will add the Node back into the DOM because it still exists in the virtual DOM.

The problem is, if you run into a case, where react want's to manipulate the node you just deleted, you'll get DOMExceptions errors which will cause your app to crash.

I'd suggest not to update/delete the React DOM from outside of react if you're unsure what you're doing.

From the official docs:

React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.

This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each are doing.

Find more info in the Docs:

https://reactjs.org/docs/integrating-with-other-libraries.html#integrating-with-dom-manipulation-plugins

Upvotes: 1

Related Questions