React, async function different render count

React, async function without await Promise((resolve) => resolve()) renders 1 time. But when i add await Promise(...) this time renders 100 times.

import { useState } from "react";
import "./styles.css";

export default function App() {
  console.log("render..");

  const [test, setTest] = useState(0);

  const handle = async () => {
    for (let index = 0; index < 100; index++) {

       // renders 1 time when comment this line
       await new Promise((resolve) => { resolve(); });

      setTest(index);

 
    }
  };

  return (
    <div className="App">

      <button onClick={handle}> click {test} </button>
    </div>
  );
}

codesandbox

I don't know why this is happening? I expect log render 100 times. I will appreciate if you can answer why renders 1 time without await new Promise(...).

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW