Новый хук useFormStatus

Хук useFormStatus может использоваться в дочернем компоненте который вызывается внутри тега form, который обрабатывается action функцией.

Хук useFormStatus **** позволяет получить доступ к состоянию, данным формы, методу отправки и ссылку на функцию action.

const { pending, data, method, action } = useFormStatus();

В примере вынесем кнопку в отдельный компонент. В компоненте кнопки вызовем хук useFormStatus чтобы получить состояние формы и дизэйблить кнопку когда форма отправляется.

Также закоментируем все что связано с useTransition. Так как ф-я определенная в action формы является action функцией, и автоматически обрабатывает в том числе состояние формы. Которое мы сейчас получаем через useFormStatus.

import { useFormStatus } from "react-dom"; // Из react-dom

const Btn = () => {
	const { pending } = useFormStatus();
	return (
		<button className="btn btn-dark" disabled={pending}>
			Update
		</button>
	);
};

function App() {
	const [error, setError] = useState(null);
	// const [isPending, setTransition] = useTransition();
	const [success, setSuccess] = useState(false);

	const handleSubmit = async (formData) => {
		console.log(formData.get("name"));

		// setTransition(async () => {
			const error = await updateName(name);
			if (error) {
				setError(error);
				return;
			}
			setSuccess(true);
		// });
	};
	
	
	// ...
	
	return (
		<form action={handleSubmit} className="card shadow p-3">
			{success && showSuccess()}
			<label className="form-label">Enter name</label>
			<input name="name" className="form-control mb-3" />
			<Btn />
			{error && <p>{error}</p>}
		</form>
	);
	
}