Answer
Render must stay pure. Reading DOM causes side effects and inconsistent behavior due to multiple render passes.
Quick Answer
Reading DOM properties (offsetHeight, getBoundingClientRect) during render causes layout thrashing — the browser must compute the layout immediately instead of batching it. In concurrent mode, React may run render multiple times, causing multiple forced layouts. Always read DOM in useLayoutEffect or event handlers, not in the render function.
S
SugharaIQ Editorial Team
Verified Answer
This answer has been peer-reviewed by industry experts holding senior engineering roles to ensure technical accuracy and relevance for modern interview standards.
Want to bookmark, take notes, or join discussions?
Sign in to access all features and personalize your learning experience.
Source: SugharaIQ