React setState callback in loop

1

Is this possible? I’m trying to deal cards from an array to start a game, but everything I try is just dealing the first card over and over again. React batches the updates, so the array is changed only after the loop completes. Everything says use the callback method, which seems to be the only way in ReScript, but it still isn’t updating the state before the next iteration such that subsequent cards would be dealt out. I had a ‘deal’ button that calls a deal func when clicked that runs a for loop up to the number of players, calling ‘setDeck’ each time, deck being the result of sliceToEnd, which returns a new array: setDeck(_ => Array.sliceToEnd(deck, ~start=1)) or setDeck(prev => Array.sliceToEnd(prev, ~start=1)), etc. How can I do this?

Thank you!

2

Can you maybe come up with a minimal repro ideally on the playground?

3

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>
}