1---
2title: Avoid Layout Thrashing
3impact: MEDIUM
4impactDescription: prevents forced synchronous layouts and reduces performance bottlenecks
5tags: javascript, dom, css, performance, reflow, layout-thrashing
6---
7 
8## Avoid Layout Thrashing
9 
10Avoid interleaving style writes with layout reads. When you read a layout property (like `offsetWidth`, `getBoundingClientRect()`, or `getComputedStyle()`) between style changes, the browser is forced to trigger a synchronous reflow.
11 
12**This is OK (browser batches style changes):**
13```typescript
14function updateElementStyles(element: HTMLElement) {
15  // Each line invalidates style, but browser batches the recalculation
16  element.style.width = '100px'
17  element.style.height = '200px'
18  element.style.backgroundColor = 'blue'
19  element.style.border = '1px solid black'
20}
21```
22 
23**Incorrect (interleaved reads and writes force reflows):**
24```typescript
25function layoutThrashing(element: HTMLElement) {
26  element.style.width = '100px'
27  const width = element.offsetWidth  // Forces reflow
28  element.style.height = '200px'
29  const height = element.offsetHeight  // Forces another reflow
30}
31```
32 
33**Correct (batch writes, then read once):**
34```typescript
35function updateElementStyles(element: HTMLElement) {
36  // Batch all writes together
37  element.style.width = '100px'
38  element.style.height = '200px'
39  element.style.backgroundColor = 'blue'
40  element.style.border = '1px solid black'
41  
42  // Read after all writes are done (single reflow)
43  const { width, height } = element.getBoundingClientRect()
44}
45```
46 
47**Correct (batch reads, then writes):**
48```typescript
49function avoidThrashing(element: HTMLElement) {
50  // Read phase - all layout queries first
51  const rect1 = element.getBoundingClientRect()
52  const offsetWidth = element.offsetWidth
53  const offsetHeight = element.offsetHeight
54  
55  // Write phase - all style changes after
56  element.style.width = '100px'
57  element.style.height = '200px'
58}
59```
60 
61**Better: use CSS classes**
62```css
63.highlighted-box {
64  width: 100px;
65  height: 200px;
66  background-color: blue;
67  border: 1px solid black;
68}
69```
70```typescript
71function updateElementStyles(element: HTMLElement) {
72  element.classList.add('highlighted-box')
73  
74  const { width, height } = element.getBoundingClientRect()
75}
76```
77 
78**React example:**
79```tsx
80// Incorrect: interleaving style changes with layout queries
81function Box({ isHighlighted }: { isHighlighted: boolean }) {
82  const ref = useRef<HTMLDivElement>(null)
83  
84  useEffect(() => {
85    if (ref.current && isHighlighted) {
86      ref.current.style.width = '100px'
87      const width = ref.current.offsetWidth // Forces layout
88      ref.current.style.height = '200px'
89    }
90  }, [isHighlighted])
91  
92  return <div ref={ref}>Content</div>
93}
94 
95// Correct: toggle class
96function Box({ isHighlighted }: { isHighlighted: boolean }) {
97  return (
98    <div className={isHighlighted ? 'highlighted-box' : ''}>
99      Content
100    </div>
101  )
102}
103```
104 
105Prefer CSS classes over inline styles when possible. CSS files are cached by the browser, and classes provide better separation of concerns and are easier to maintain.
106 
107See [this gist](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) and [CSS Triggers](https://csstriggers.com/) for more information on layout-forcing operations.
108