scrimba
What's new in React 19
useActionState() - Part 1
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

useActionState() - Part 1
AboutCommentsNotes
useActionState() - Part 1
Expand for more info
index.jsx
run
preview
console
import ReactDOM from "react-dom/client"
import { useState } from "react"
import { updateNameInDB } from "./api"

function App() {
const [name, setName] = useState(
() => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
)
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)

async function formAction(formData) {
setLoading(true)
setError(null)
try {
const newName = await updateNameInDB(formData.get("name"))
setName(newName)
} catch (error) {
console.error(error.message)
setError(error)
} finally {
setLoading(false)
}
}

return (
<>
<p className="username">
Current user: <span>{name}</span>
</p>
<form action={formAction}>
<input
type="text"
name="name"
required
/>
<button type="submit">Update</button>
</form>
</>
)
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />)
Console
/index.html
-5:17