Advanced: Form state management step 3 – useForm

[lucasconstantino]

⚠️ Warning

The changes contained in this PR are considered advanced, and won't be part of the final application. We'll leave it here as a reference and for learning purposes.

---

We've covered how to go further on UX and state managing by adding touch states and abstracting form state managing to a separate hook. Now, what about we make this whole logic reusable to other forms?

This PR builds on top of the the previous login form state managing to cover:

1. Extract form state management from useLoginForm to useForm
2. Make form state generic, so it can be used with different form inputs (code)
3. Update useLoginForm to use useForm (code)

That's it! Now we could potentially use the same useForm hook to other forms with have :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
frontend-academy-2022	✅ Ready (Inspect)	Visit Preview	Jun 13, 2022 at 5:38PM (UTC)

[Serbiaguy96]

I was just curious, if i use Record<string, any> instead of object, that would lead to stronger typing right?

[lucasconstantino]

Not really, I would say. object is more strict than Record<string, any>. We want the TFormData to be either provided or inferable from the initialValues. The object here helps with creating awareness when I cannot infer nor have the type passed in:

With TFormData extends object (warns):

With TFormData extends Record<string, any> (does not warn):

[Serbiaguy96]

Aaah, i see. Thank you, that make sense 💯 I saw the one with the Record in some example, now i see the difference.