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.
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.
> 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
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.
