What is alternative way to handle input's focus?

[constantinehuzenko]

I'm trying to find the best way to handle focus for a Remix app. The common approach is using useEffect, as shown in this example:

remix/examples/newsletter-signup/app/routes/newsletter.tsx

Lines 46 to 60 in 9b46b90

	useEffect(() => {
	if (state === "error") {
	inputRef.current?.focus();
	}
	if (state === "idle" && mounted.current) {
	inputRef.current?.select();
	}
	if (state === "success") {
	successRef.current?.focus();
	}
	mounted.current = true;
	}, [state]);

The main reason I don't like this method is because when performing validation and focusing through an action, there is a brief loading state before the validation error/focusing occurs, even though no actual network request has been sent.

My solution is to use useFetcher and do validation/focuses on form submit, if validation passed I'm sending clean data to action. Do you think is it good approach? Can somebody share their experience handling focus?

[Erij-Maherzia-BEN-BRAHIM]

Why don't you use remix-validated-form?