Utility to ensure UI mutations are executed together

batch-ui-mutations.js

export const batchUIMutation = (fnMutatingUI) => {
  if (typeof window !== 'undefined' && window.requestAnimationFrame) {
    const id = requestAnimationFrame(() => {
      cancelAnimationFrame(id)
      fnMutatingUI()
    })
    return () => cancelAnimationFrame(id)
  }

  const id = setTimeout(() => {
    clearTimeout(id)
    fnMutatingUI()
  }, 17)
  return () => clearTimeout(id)
}

example.js

import { batchUIMutation } from "./batch-ui-mutations.js"

// in browsers supporting requestAnimationFrame mutations on body.style below
// will be batched by browser to trigger only one repaint/reflow
// inside other browsers, they will be grouped thanks to setTimeout without benefits of requestAnimationFrame

batchUIMutation(() => {
  document.body.style.color = "red"
})
batchUIMutation(() => {
  document.body.style.paddingTop = "10px"
})

// please note each call to batchUIMutation can be cancelled as shown below
const cancel = batchUIMutation(() => {
  document.body.style.paddingLeft = "10px"
})
cancel()