react-javascript-performance

JavaScript Performance

Micro-optimizations for hot paths that can add up to meaningful improvements.

1. Avoid Layout Thrashing

Impact: MEDIUM - Prevents forced synchronous layouts

Avoid interleaving style writes with layout reads. Reading layout properties between style changes forces synchronous reflow.

This is OK: browser batches style changes

function updateElementStyles(element: HTMLElement) {
  element.style.width = '100px'
  element.style.height = '200px'
  element.style.backgroundColor = 'blue'
  element.style.border = '1px solid black'
}

Incorrect: interleaved reads and writes force reflows

function layoutThrashing(element: HTMLElement) {
  element.style.width = '100px'
  const width = element.offsetWidth // Forces reflow
  element.style.height = '200px'
  const height = element.offsetHeight // Forces another reflow
}

Correct: batch writes, then read once

function updateElementStyles(element: HTMLElement) {
  element.style.width = '100px'
  element.style.height = '200px'
  element.style.backgroundColor = 'blue'
  element.style.border = '1px solid black'

  // Read after all writes (single reflow)
  const { width, height } = element.getBoundingClientRect()
}

Better: use CSS classes

// Incorrect: interleaving style changes with layout queries
function Box({ isHighlighted }: { isHighlighted: boolean }) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (ref.current && isHighlighted) {
      ref.current.style.width = '100px'
      const width = ref.current.offsetWidth // Forces layout
      ref.current.style.height = '200px'
    }
  }, [isHighlighted])

  return <div ref={ref}>Content</div>
}

// Correct: toggle class
function Box({ isHighlighted }: { isHighlighted: boolean }) {
  return (
    <div className={isHighlighted ? 'highlighted-box' : 'box'}>
      Content
    </div>
  )
}

---

2. Build Index Maps for Repeated Lookups

Impact: LOW-MEDIUM - O(n) to O(1) per lookup