Hacker News Reader

Comment by TN1ck | Hacker News Reader

Isn't the way React handles the DOM perfectly to prevent layout-trashing? As far as I understand, the DOM in React is nearly write-only, so layout-trashing should never occur, but I don't know the exact implementation details. Please correct me if this is not correct, I couldn't find any hard information on this.

View on HN

> As far as I understand, the DOM in React is nearly write-only

You can still read it if you need[0]. Theoretically, major layout invalidation should only be done in bulk during reconciliation, but I don't know when the rendering phase applies, and React also has component-local state.

I know Om[1] only does rendering on requestAnimationFrame (so at once and synchronised with RAF) but that seems to be done by Om itself[2] and I can't find any clear documentation on that part for React.

[0] although it may not be up to date if you're between a state change and a rendering

[1] https://github.com/swannodette/om

[2] https://github.com/swannodette/om/blob/master/src/om/core.cl...

There is this React plugin/extension/whatever for using requestAnimationFrame with "plain React" https://npmjs.org/package/react-raf-batching

But as you can see, the documentation is a bit sparse ;)

React is designed so that you should never need to read from the DOM except things like an input field's value. React specifically tries to never touch the DOM except when doing necessary mutations.

If you're doing complicated layout code, then you will need to read from the DOM. Currently React doesn't have great support for managing layout from JS in a clean, efficient way but it's one of the things we're looking to add in the future.

> React is designed so that you should never need to read from the DOM

Oh absolutely, sorry if that was not clear.

But sometimes you need to (e.g. to place an overlay or tooltip thing over an element), and AFAIK that remains possible.

Correct.

This is correct. Unless you manually add code to touch the DOM in your component methods (which is rarely necessary), React only touches the DOM when it needs to mutate it and more or less does not read from it. For example, when mutating several parts of the DOM, React batches the element creation into a single innerHTML call because that's faster than converting many individual HTML strings into DOM nodes.

Reply on news.ycombinator.com