Saber2pr's Blog

BatchUpdate

You may use useState/setState multiple times in React Hook, for example:

const useValue = () => {
  const [a, setA] = useState(0)
  const [b, setB] = useState(1)

  const update = () => {
    setA(a)
    setB(a)
  }

  return update
}

Components that use useValue in this way will render multiple times. Optimize with batchedUpdate:

import { unstable_batchedUpdates } from 'react-dom'

const useValue = () => {
  const [a, setA] = useState(0)
  const [b, setB] = useState(1)

  const update_batched = () =>
    unstable_batchedUpdates(() => {
      setA(a)
      setB(a)
    })

  return update_batched
}