Build useForm hook in React

Forms management can be tricky. During the development of a simple login form, of course, there is no option to have problems. Anyway, problems occur when there is a requirement for .

Your first choice will be a library. It's not bad, generally, that's a good idea. However, if you need more advanced features or to fix bugs - there is a headache.

In addition, there is a risk connected with library usage. They often lose support over time, then you need to migrate to other technologies. As a result, you might end up using other libs with code that is usually useless for you.

I experienced this many, many times... Projects start, or other is installed, there is a feature which you need and right now it starts... The big pain of creating workarounds and adding additional dependencies, maintaining versions or even worse - rewriting your codebase because the lib which you used creates an impact on architecture - .

So in this article, I'll try to show you, that there is nothing bad with creating something that already exists, because sometimes, under good conditions, it can be worthwhile - .

Let's create hook and check how it will work with forms.

Remember all custom solutions require additional maintenance. Use it wisely.

1. What are we building?

It will be the multi-step form for user account creation. You can check how it works on . This app uses a hook which we implement for every form.

2. Let's design our basic API

This is a really important step. We should cover all features and design dev friendly API.

3. Creating test cases

Tests during development guarantee that you don't break anything after providing code changes.

Please check the tests implementation in if you're curious. This is skipped to save your time.

4. Adding type definitions

Before implementing real code, firstly you need to create the type definitions. It will be much easier to write code to fit them instead of adding it later. With unit tests and types, you can take it easy 👽. Green means it works.

5. Implementing values change API

It's time to write real code. Here you have basic logic which allows to update values via and functions. Second function contains additional logic which validates object and informs you in runtime.

Yes, you used hook for state management instead of . It's because changes are immediete not async like via setter. It gives you opportunity to read always up to date data inside components or other custom hooks.

This interesting usage has been described perfectly in article.

6. You need validation!

You need mechanism which will run functions passed via validation object to hook and here it is.

You used for loops because:

It can look a little bit old but the performance is much better. I'm 100% sure that enjoy that ⌨️.

7. Connect validation

Right now you just need to connect your function with hook.

8. Attach metadata

Metadata is important. You definetelly need that to show different components on UI or highlight interactions.

9. Implement confirmation

Confirmation is equal to running validation for the whole form. It's important because sometimes you run validation always and sometimes only after the first submission. Depends on UX which you want to achieve.

10. Be able to reset

Simple function which resets state to initial.

11. Push subscribe button

Right now you can subscribe for single field changes and perform side effects. Imagine a situation when a user types something in input and you need to perform the request. Here is the perfect place and also you can add operators.

12. Usage

Right now you can use for all cases.

Right now you have a base API. You can use if you don't like prop drilling or create with additional logic.

Use these tools wisely. You need to understand the problems and benefits of technology and the techniques that you are using. Make sure that your project fits into solutions like those before you use them.

Feel free to contact me if you have any questions/proposals. Have a nice day and good health!