React setState callback in loop

You should call setState after the react rendered done each time in the loop.
Here is the example.

@react.component
let make = () => {
  let (state, setState) = React.useState(_ => 1)

  let sleep = (ms: int) => {
    Js.Promise2.make((~resolve, ~reject) => {
      Js.Global.setTimeout(() => {
        resolve()
      }, ms)->ignore
    })
  }

  React.useEffect1(() => {
    let playersCount = 10
    let handle = async () => {
      for i in 0 to playersCount - 1 {
        setState(_ => i)
        // wait the react render the latest state done.
        await sleep(0)
      }
    }
    handle()->ignore
    None
  }, [])

  <div> {`state: ${state->Belt.Int.toString}`->React.string} </div>
}