Building user-friendly forms in React

Forms are extremely important, but often overlooked components of any web application. They allow us to collect user inputs and in general, interact with the user. Login pages also contain forms where users have to fill in their credentials. In short, forms are the backbone of interactive web applications. There isn’t enough information about building user-friendly form online, so I decided to write this post about building user-friendly forms in React.
Forms are extremely necessary, but can be frustrating for users. You can implement these features to improve user experience. Then they will be more likely to take time to fill out your forms to give you valuable information.

Reset form after it is submitted

It’s always a good idea to clear the form after users are finished filling it and click the submit button. This is great because it gives visual confirmation that their input has been collected and saved. Even better if you can show a simple message that confirms that form has been submitted successfully.

In React, user inputs are stored in the state. Almost every developer follows this practice because it is ingrained into the React ecosystem. When users enter something into the field, state value is automatically updated. At the same time, the value attribute of input elements is directly tied to the state. This way, React component knows about any change – whether user enters something new into the form or deletes it. This helps React stay in sync and display latest changes to the screen.

It’s very easy to programmatically reset input values because they are tied to the state. We can simply use the setter function returned by the useState() hook and set the state value to an empty string or null.

You can do this in the onSubmit() event handler. Before resetting every input value you might want to save inputs though. This article on SimpleFrontEnd explains the process of clearing the forms after they are submitted.

Redirect to another page after the form is submitted

Sometimes users are on certain pages only to fill out the form. Login page is a perfect example of this. Once they have entered the information and submitted the form, they should be taken to a different page. In case of the login page, maybe you want to redirect them to a /dashboard page, or a /welcome page. This is very easy to do in React. More specifically, you’re going to need the react-router library.

The latest version of react-router provides useNavigation() hook for functional components and Navigate custom component for class components. There is an excellent article that explains how to use these tools to redirect to another page in React.

If you’re used to the useHistory() hook for navigating React pages, you will find that useNavigation() follows the same principles. The Navigate component is new, and it allows us to declaratively navigate to a different page, which is often very useful.