useChildFormStatus

00_README.md

Why is useFormStatus always returning pending false?

So you are trying out that new fangled useFormStatus hook but it doesn't actually react to the status of your form?

Now you tried to Google it and all you get is RTFM "go read docs again". Because hook useFormStatus shows you the status of parent form, not a sibling one.

Let's explain that in English.

• <form><Spinner></form> works
• <Spinner><form></form> doesn't

Thus useChildFormStatus was born, it allows you to lift the form state up to the parent component.

01_nice_example.tsx

export const Test = () => {
	const { status, Listener } = useChildFormStatus();
	const { pending } = status;
	return (
		<form
			action={async (formData) => {
				await new Promise((resolve) => setTimeout(resolve, 300));
				for (const [key, value] of formData) {
					console.log(key, value);
				}
			}}
		>
			<input type="text" name="name" />
			<input name="submit" type="submit" value="Submit" disabled={pending} />
			<input name="submit2" type="submit" value="Submit2" disabled={pending} />
			<Listener />
		</form>
	);
};

const useChildFormStatus = () => {
	const [status, setStatus] = React.useState<ReturnType<typeof useFormStatus>>({
		pending: false,
		data: null,
		method: null,
		action: null,
	});
	const Listener = React.useCallback(() => {
		const currentStatus = useFormStatus();
		React.useEffect(() => {
			setStatus(currentStatus);
		}, [currentStatus]);
		return null;
	}, [setStatus]);
	return { status, Listener };
};

02_full_example_experimental.tsx

/* eslint-disable @typescript-eslint/ban-ts-comment */
import React from 'react';
import ReactDom from 'react-dom';

const useFormStatus = (
	ReactDom as any as {
		experimental_useFormStatus: () => {
			pending: boolean;
			data: FormData | null;
			method: 'get' | 'post' | null;
			action: ((formData: FormData) => Promise<void>) | null;
		};
	}
).experimental_useFormStatus;

export const Test = () => {
	const { status, Listener } = useChildFormStatus();
	const { pending } = status;
	return (
		<form
			// @ts-ignore
			action={async (formData: FormData) => {
				await new Promise((resolve) => setTimeout(resolve, 300));
				for (const [key, value] of formData) {
					console.log(key, value);
				}
			}}
		>
			<input type="text" name="name" />
			<input name="submit" type="submit" value="Submit" disabled={pending} />
			<input name="submit2" type="submit" value="Submit2" disabled={pending} />
			<Listener />
		</form>
	);
};

const useChildFormStatus = () => {
	const [status, setStatus] = React.useState<ReturnType<typeof useFormStatus>>({
		pending: false,
		data: null,
		method: null,
		action: null,
	});
	const Listener = React.useCallback(() => {
		const currentStatus = useFormStatus();
		React.useEffect(() => {
			setStatus(currentStatus);
		}, [currentStatus]);
		return null;
	}, [setStatus]);
	return { status, Listener };
};

03_rtfm_version.tsx

export const Test = () => {
	return (
		<form
			action={async (formData) => {
				await new Promise((resolve) => setTimeout(resolve, 300));
				for (const [key, value] of formData) {
					console.log(key, value);
				}
			}}
		>
			<input type="text" name="name" />
			<Submit />
			<Submit2 />
		</form>
	);
};

const Submit = () => {
	const { pending } = useFormStatus();
	return <input name="submit" type="submit" value="Submit" disabled={pending} />;
};

const Submit2 = () => {
	const { pending } = useFormStatus();
	return <input name="submit2" type="submit" value="Submit2" disabled={pending} />;
};