React: How much can I manipulate the DOM React has rendered?

I’m a React dev. I’ll answer each of your questions:


React does not care if DOM is moved around between updates as long as you put it back in componentWillUpdate.

True — React doesn’t look at the DOM except when updating, with the exception of event handlers:

React event handlers will still work on elements that have been moved.

I wouldn’t rely on this, and I’m not sure that it’s even true now.

React will merge any inline styles you ask it with styles already on the element (even if it did not set them.)

I also wouldn’t rely on this — right now React sets individual properties but I could easily imagine it setting el.style.cssText if that were faster, which would blow away individual changes that you’ve made.

React will update DOM it has rendered, even if you move that DOM somewhere else in the document!

I don’t believe this is true currently and you also shouldn’t rely on this.


Broadly speaking, you shouldn’t manipulate by hand the DOM that React has created. It’s 100% kosher to create an empty <div> in React and populate it by hand; it’s even okay to modify the properties of a React-rendered element as long as you don’t later try to change its properties in React (causing React to perform DOM updates), but if you move an element, React may look for it and get confused when it can’t find it.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)