Form & Server Actions

Controlled vs. Uncontrolled Components

JSX Prop	Elements	Controlled?	Requires `onChange`	Purpose
`value`	`input`, `select`	Yes	Yes	Bind live value to React state
`defaultValue`	`input`, `select`	No	No	Set initial value only
`checked`	`checkbox`, `radio`	Yes	Yes	Bind live boolean to state
`defaultChecked`	`checkbox`, `radio`	No	No	Set initial checked state

Value is source‑of‑truth in React state; UI updates via onChange.

const [text, setText] = useState("")
<input value={text} onChange={e => setText(e.target.value)} />

React does not track updates; only the initial value is set.

<input type="text" defaultValue="Hello" />
<input type="checkbox" defaultChecked />

A Server Action is an async function annotated with 'use server' that runs on the server and is intended to be used with React’s startTransition.
When you use <form action={fn}>, the function fn receives a FormData argument and is invoked on submit—this works whether or not fn is a Server Action.
Only if fn is a true Server Action (with 'use server' at the top of its file) and the <form> resides within a Server Component tree will Next.js employ the “property-call” flow: the browser POSTs to /_NEXT_ACTION, the server runs fn, and streams back both the action result and a React Flight diff in one response, letting the client patch and update the UI automatically.

// Implicit trigger when passed to a form or button
<form action={serverAction}>
<button formAction={serverAction}>

Under the hood, the browser sends an HTTP POST to /__NEXT_ACTION with a multipart/mixed body.
The server can stream back both the action’s return value and a React Flight diff (the minimal UI update) in that same response.

<aside>

React Flight diff: the minimal data needed to patch Server Component output on the client.

</aside>

Using <form action={serverAction}> or <button formAction={serverAction}>:

React intercepts the submit, serializes the form into a multipart/mixed request to /__NEXT_ACTION, and returns a multipart/mixed response containing both the action’s result and a React Flight diff.