# `react-doctor/js-batch-dom-css`

Batch DOM/CSS reads and writes — interleaving them inside a loop causes layout thrashing. Read first, then write

- **Category:** Performance
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** global
- **Enabled when:** always

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

The rule fires when two or more adjacent ExpressionStatements each assign to a .style.<prop> chain (e.g. el.style.color = '...'; el.style.fontSize = '...';). It does not actually detect interleaved read/write layout thrashing — just adjacent style writes. False positive if the writes target different elements or are intentionally split around conditional logic that has to sit between them.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Batch into a single write: el.style.cssText = 'color: red; font-size: 12px' or el.setAttribute('style', '...'). Better, define a class in CSS and toggle with el.classList.add('active') to keep styling out of JS. If inside a loop with reads, do all reads first then all writes in a second pass to avoid forced synchronous layout. https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing