Efficient and Effective Form Handling in React

Forms are a crucial part of web application. Building forms can be straightforward yet powerful, thanks to its component-based architecture and state management capabilities. In this post, we’ll explore how to create and manage forms in React, understand controlled and uncontrolled components, and leverage libraries like Formik and React Hook Form for advanced use cases.

Introduction to Forms

Forms are fundamental for user interaction and data collection in web applications. Forms can be created using standard HTML form elements. Understanding these tools and techniques is crucial for building robust forms.

Controlled vs. Uncontrolled Components

Controlled Components

In controlled components, React manages the state of form elements. The state is updated via the setState function and is passed to the form elements as props.

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Uncontrolled Components
In uncontrolled components, form data is handled by the DOM itself. We use refs to access form values.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted name: ${nameRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Handling Form State with useState

React’s useState hook makes it easy to manage form state. Here’s an example of a simple login form:

import React, { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({ email: '', password: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form Data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <label>
        Password:
        <input type="password" name="password" value={formData.password} onChange={handleChange} />
      </label>
      <button type="submit">Login</button>
    </form>
  );
}

Form Validation

Form validation ensures that the data submitted by the user meets the required criteria. You can implement validation directly in the form component or use libraries for more complex scenarios.

import React, { useState } from 'react';

function ValidatedForm() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const validate = () => {
    const errors = {};
    if (!formData.email.includes('@')) {
      errors.email = 'Invalid email address';
    }
    if (formData.password.length < 6) {
      errors.password = 'Password must be at least 6 characters long';
    }
    return errors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate();
    if (Object.keys(validationErrors).length === 0) {
      console.log('Form Data:', formData);
    } else {
      setErrors(validationErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <label>
        Password:
        <input type="password" name="password" value={formData.password} onChange={handleChange} />
        {errors.password && <span>{errors.password}</span>}
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Using Form Libraries

For more complex forms, it’s often beneficial to use libraries like Formik and Hook Form.

Formik

Formik simplifies form management, validation, and submission.

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

function FormikForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        console.log('Form Data:', values);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label>
            Email:
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <label>
            Password:
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
          </label>
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
}

React Hook Form

React Hook Form provides a performant, flexible, and extensible way to manage forms with React hooks.

import React from 'react';
import { useForm } from 'react-hook-form';

function HookForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log('Form Data:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Email:
        <input {...register('email', { required: 'Email is required', pattern: { value: /^\S+@\S+$/i, message: 'Invalid email' } })} />
        {errors.email && <span>{errors.email.message}</span>}
      </label>
      <label>
        Password:
        <input {...register('password', { required: 'Password is required', minLength: { value: 6, message: 'Password must be at least 6 characters long' } })} />
        {errors.password && <span>{errors.password.message}</span>}
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Best Practices

• Keep form state localized: Use local state for form values to keep the component isolated and manageable.
• Validate early and often: Implement validation logic as the user types to provide immediate feedback.
• Use libraries for complex forms: Leverage libraries like Formik or Hook Form for advanced use cases and better performance.

Conclusion

Forms are an integral part of web applications and provides the tools and flexibility to manage them effectively. Whether you choose to build forms using controlled or uncontrolled components, or leverage form libraries, component-based architecture makes it easy to create and manage forms.

More References

• https://www.geeksforgeeks.org/how-to-handle-forms-in-react/
• https://www.freecodecamp.org/news/how-to-build-forms-in-react/
• https://athen.tech/react-hook-form-efficient-form-handling-in-react/