React Forms With Hooks - 1 - Use React Hooks To Create A Reusable Form Component

React forms can be a pain, and are super boring to create in my opinion. I'll show you a simple example of how to go about creating a reusable React form component with the newest features of hooks.

When creating forms manually, it often takes considerable time to explicitly declare every field in your code. Instead, we will create a custom figuration file that declares exactly what we want our React form to work. We will then pass our config down as props, and let our component handle the rest behind the scenes!

Our React form component will be quite smart, and will be able to handle loading animations, as well as displaying messages to the user about the status of the form submittal.

We will use the following components to accomplish creation of our form:

- ReactForm
- Field
- Message
- Spinner

Building out these components in this manner will allow us to create however many instances of the React form that we want, and will require zero manual work from developers. Just create the config, set it, and forget it.

As long as you are clever enough, React provides a great API interface to simplify almost any portion of your user interface. If you are hesitant on getting started with hooks, don't be. Once you get it, you'll love them!

By the end of this video you still aren't quite able to grasp how to create the React form, please reach out to me in the comments, and I can help you until you do.

React Hooks Used:
- useState
- useCallback
- memo
- useRef

Links
---------
Repository:
https://github.com/DZuz14/react-auto-form

React Hooks API Reference:
https://reactjs.org/docs/hooks-reference.html

Follow Me:
https://twitter.com/ItsMeDannyZ
https://github.com/DZuz14