Advanced: Form state management step 2 – useLoginForm

[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.

---

With the introduction of login form state management after Lesson 08: Built in React APIs, we've learned how hard it can become to handle form state manually – input values, validation states, errors, submit state, etc. And, if we manage to have the state itself working, chances are the UX won't be the best anyway. That's probably enough for us to realize how form libraries are essential to building high-quality forms in our applications.

But, what about we push a little bit more, and pretend there was no form library at our disposal? Turns out this is a great opportunity for us to play around with React APIs.

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

1. Abstract away form submitting logic and state (code) – let your handlers care for the application needs only (code)
2. Abstract away low-level event handling (code, code, and code)
3. Touch states
   1. Mark inputs as touched when they stop interacting with an input (code)
   2. Bother users only after they have interacted with the input (code)
   3. Or after as soon as they try to submit the form (code)

[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:35PM (UTC)

[OndrejDrapalik]

Not gonna pretend I understand all the type syntax used, but it's nice to what potentially Formik or ReactHooks are doing under the hood.

[matyasmihalka]

Completely agree. Until this point I was pretty confident whats going on in our project, but this one seems more like an expert approach. Nice showcase.

[lucasconstantino]

@OndrejDrapalik @matyasmihalka this definitely isn't the most straight-forward code. In fact, this is why we decided it wasn't necessary to include as our "main track" in the application.

The idea here is really to showcase how libraries such as Formik are made, and how complex proper form state handling can be without those libraries.

I'll give you a hint though: React Hook Forms is way, waaay more complex than Formik, as it takes over React entirely, building it's solution on top of traps and Proxy states, executing hooks dynamically based on state consumption. Quite neat. If you are interested, we could have a chat about it or explore a simpler isolated solution to showcase the technique.