Cursor rule

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