react-dom/hooks

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

react-dom Hooks only for web applications

The react-dom package contains Hooks that are only supported for web applications running in the browser DOM environment. These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications.

useFormStatus hook signature and return value

useFormStatus is imported from react-dom and returns a status object with properties: pending (boolean), data (FormData interface object or null), method (string: 'get' or 'post'), and action (function reference or null). The hook takes no parameters.

useFormStatus pending property

The pending property is a boolean that is true when the parent form is actively submitting, and false otherwise.

useFormStatus data property

The data property is an object implementing the FormData interface that contains the data the parent form is submitting. If there is no active submission or no parent form, it is null.

useFormStatus method property

The method property is a string value of either 'get' or 'post', representing whether the parent form is submitting with GET or POST HTTP method. By default, a form uses the GET method.

useFormStatus action property

The action property is a reference to the function passed to the action prop on the parent form. If there is no parent form, the property is null. If there is a URI value provided to the action prop, or no action prop specified, status.action will be null.

useFormStatus must be called inside a form component

The useFormStatus Hook must be called from a component that is rendered inside a form element. The component calling useFormStatus must be a child of the form to track its status.

useFormStatus tracks only parent form

useFormStatus will only return status information for a parent form. It will not return status information for any form rendered in that same component or child components.

useFormStatus does not track sibling or same-component forms

useFormStatus will not return status information for a form rendered in the same component that calls the hook. The hook only tracks forms that wrap the component calling it. The hook must be in a component that is nested inside the form element.

useFormStatus example: disable button during submission

import { useFormStatus } from "react-dom"; import { submitForm } from "./actions.js"; function Submit() { const { pending } = useFormStatus(); return ( <button type="submit" disabled={pending}> {pending ? "Submitting..." : "Submit"} </button> ); } function Form({ action }) { return ( <form action={action}> <Submit /> </form> ); } export default function App() { return <Form action={submitForm} />; } This example shows how to use the pending property to disable a submit button and display different text during form submission.

useFormStatus example: display submitted form data

import {useState, useMemo, useRef} from 'react'; import {useFormStatus} from 'react-dom'; export default function UsernameForm() { const {pending, data} = useFormStatus(); return ( <div> <h3>Request a Username: </h3> <input type="text" name="username" disabled={pending}/> <button type="submit" disabled={pending}> Submit </button> <br /> <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p> </div> ); } This example shows how to use the data property to access FormData and display what values are being submitted by reading data.get(fieldName).

Give your agent this brain