cf.completefrontend

Predict the outputHard

An async click handler sets state before and after an await. What does it log and show?

handleSave sets two pieces of state, awaits an already-resolved promise, logs, and sets both again. The component logs every render.

What does it log, and what does the page show?
import { useState } from "react";
 
export default function App() {
  const [status, setStatus] = useState("idle");
  const [saves, setSaves] = useState(0);
  console.log("render", status, saves);
 
  async function handleSave() {
    setStatus("saving");
    setSaves(saves + 1);
    await Promise.resolve();
    console.log("after await", status, saves);
    setStatus("saved");
    setSaves(saves + 1);
  }
 
  return (
    <>
      <p>
        {status}, saves: {saves}
      </p>
      <button onClick={handleSave}>Save</button>
    </>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click Save once.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…