Managing Form State and Validation in Next.js

Managing form state and validation are essential tasks in web development, ensuring that user input is captured accurately and validated before submission. In Next.js, a popular React framework for building server-rendered and statically-exported web applications, this process can be streamlined using both built-in and third-party libraries. This article will provide a detailed explanation of how to manage form state and validation in Next.js, covering best practices and important considerations.

1. Understanding Form State Management

Form state management in Next.js involves capturing and storing user input data. This can be done using several methods, including React's built-in state management (useState), useReducer, or third-party libraries like Formik and React Hook Form. Here we'll focus on using useState and how to integrate it with form validation.

Using useState: Let's create a simple form that captures a user's name and email. We'll manage form state with useState.

import { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form Submitted:', formData);
    // Perform validation and submission logic here
  };

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

export default FormComponent;

2. Integrating Form Validation

Form validation ensures that the data entered by the user meets specific criteria. This can range from checking that fields are not empty to validating email formats. Next.js doesn’t provide a built-in validation mechanism, but libraries like Yup can be used alongside form libraries for robust validation.

Using Yup: Yup is a powerful, object schema validation library. We can use Yup in conjunction with our form state to perform validation.

First, install Yup.

npm install yup

Then, integrate Yup into our form.

import { useState } from 'react';
import * as Yup from 'yup';

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

  const [errors, setErrors] = useState({});

  const schema = Yup.object().shape({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Invalid email format').required('Email is required')
  });

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await schema.validate(formData, { abortEarly: false });
      console.log('Form Submitted:', formData);
      setErrors({});
      // Proceed with submission logic
    } catch (err) {
      const validationErrors = {};
      err.inner.forEach(error => {
        validationErrors[error.path] = error.message;
      });
      setErrors(validationErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormComponent;

3. Using React Hook Form for Advanced Form Management

React Hook Form is another excellent option for managing form state and validation in Next.js. It is well-suited for complex forms and provides a simpler and more efficient API.

First, install React Hook Form.

npm install react-hook-form

Then, refactor the form using React Hook Form.

import { useForm, SubmitHandler } from 'react-hook-form';
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';

const schema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email format').required('Email is required')
});

type FormValues = {
  name: string;
  email: string;
};

function FormComponent() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
    resolver: yupResolver(schema)
  });

  const onSubmit: SubmitHandler<FormValues> = (data) => {
    console.log('Form Submitted:', data);
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p>}
      </div>
      <div>
        <label>Email:</label>
        <input {...register('email')} />
        {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormComponent;

4. Key Considerations

• Performance: Minimize re-renders by only updating state when necessary. Libraries like React Hook Form help optimize performance by reducing unnecessary state updates.
• User Feedback: Promptly display validation errors and feedback to users to guide them towards correct input.
• Server Validation: Always validate data on the server side, regardless of client-side validation. Client-side validation can be bypassed by malicious users.

5. Conclusion

Managing form state and validation efficiently is crucial for building robust and user-friendly web applications with Next.js. While manual state management with useState and Yup provides fine-grained control, using libraries like React Hook Form can simplify the process and improve performance. By leveraging these tools, developers can create interactive and secure forms for their Next.js applications.

Examples, Set Route and Run the Application: Next.js Managing Form State and Validation

Managing form state and validation is a fundamental aspect of any web application, and Next.js, a popular React framework, provides robust tools to handle these tasks efficiently. This guide will walk you through setting up routes, running an application, and managing form state along with validation in Next.js step-by-step. This example will cater to beginners who are new to both React and Next.js.

Step 1: Setting Up Your Next.js Project

First, ensure that Node.js and npm (Node Package Manager) are installed on your system. You can download Node.js from https://nodejs.org/ if it's not installed.

Once Node.js is installed, open your terminal or command prompt and run the following commands to create a new Next.js project:

npx create-next-app@latest next-form-validation
cd next-form-validation

This sets up a new Next.js project in a directory named next-form-validation.

Step 2: Set Up Routes

In Next.js, routing is straightforward. Pages are created in the pages directory, and each file inside this directory becomes a route. For our example, let’s create a simple form page.

Create a new folder named auth inside the pages directory. Inside the auth folder, create a file called register.js. This file will represent our registration form, which users can visit at /auth/register.

mkdir pages/auth
touch pages/auth/register.js

Your project structure should now look like this:

next-form-validation/
├── node_modules/
├── public/
├── styles/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
│   └── auth/
│       └── register.js
├── package.json
├── README.md
└── ...

Step 3: Create a Simple Registration Form

Open pages/auth/register.js and create a basic registration form with fields for Email, Password, and a Submit button.

// pages/auth/register.js
import { useState } from "react";

export default function Register() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Data Submitted:", formData);
    // Add form submission logic here
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: "400px", margin: "auto", marginTop: "50px" }}>
      <div style={{ marginBottom: "1rem" }}>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
          style={{
            width: "100%",
            padding: "0.5rem",
            fontSize: "16px",
          }}
        />
      </div>
      <div style={{ marginBottom: "1rem" }}>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          required
          style={{
            width: "100%",
            padding: "0.5rem",
            fontSize: "16px",
          }}
        />
      </div>
      <button
        type="submit"
        style={{
          width: "100%",
          padding: "0.5rem",
          fontSize: "16px",
          cursor: "pointer",
        }}
      >
        Register
      </button>
    </form>
  );
}

Now, we have a simple form where users can enter their email and password. When they submit the form, the handleSubmit function logs the submitted data to the console.

Step 4: Adding Validation with React Hook Form

React Hook Form is an efficient library that simplifies the process of managing forms and performing validations in React applications. First, install the package using npm:

npm install react-hook-form

Now, let's refactor our form to use React Hook Form for better state management and input validation. Import useForm from react-hook-form and update your Register component like this:

// pages/auth/register.js
import { useForm, SubmitHandler } from "react-hook-form";

type FormData = {
  email: string;
  password: string;
};

export default function Register() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();

  const onSubmit: SubmitHandler<FormData> = (data) => {
    console.log("Form Data Submitted:", data);
    // Here you can add your form submission logic
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} style={{ maxWidth: "400px", margin: "auto", marginTop: "50px" }}>
      <div style={{ marginBottom: "1rem" }}>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          {...register("email", { required: "Email is required", pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: "Invalid email address" } })}
          style={{
            width: "100%",
            padding: "0.5rem",
            fontSize: "16px",
            border: errors.email ? "1px solid red" : undefined,
          }}
        />
        {errors.email && <span style={{ color: "red" }}>{errors.email.message}</span>}
      </div>
      <div style={{ marginBottom: "1rem" }}>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          {...register("password", { required: "Password is required", minLength: { value: 8, message: "Password must be at least 8 characters" } })}
          style={{
            width: "100%",
            padding: "0.5rem",
            fontSize: "16px",
            border: errors.password ? "1px solid red" : undefined,
          }}
        />
        {errors.password && <span style={{ color: "red" }}>{errors.password.message}</span>}
      </div>
      <button
        type="submit"
        style={{
          width: "100%",
          padding: "0.5rem",
          fontSize: "16px",
          cursor: "pointer",
        }}
      >
        Register
      </button>
    </form>
  );
}

In this code:

• The register function from the useForm hook is used to register inputs with validations.
• Each field has a validation rule. If a rule is broken, an error will be stored in the errors object.
• We conditionally display error messages below their respective input fields.

Step 5: Running the Application

To see the changes you've made, run the development server with:

npm run dev

Open your web browser and navigate to http://localhost:3000/auth/register to see your form.

Step 6: Data Flow

Let's break down the data flow in our example:

1. Initial State: When the user visits the registration page (/auth/register), the Register component initializes its state with empty email and password values.
2. User Input: As the user types into the email and password fields, the register function from useForm updates the formData object.
3. Validation: Each input change triggers validation according to the rules specified during registration.
4. Form Submission: Upon clicking the submit button, React Hook Form’s handleSubmit function validates the form again. If there are no errors, the form data is logged to the console.
5. Error Handling: If any field fails validation, an error message is displayed below the respective input field.

Conclusion

Through this guide, you learned how to create a basic form in Next.js, manage form state using React’s Context API or React Hook Form, and validate input fields with React Hook Form. As you continue to develop with Next.js and React, you'll find these concepts invaluable for building robust web applications. Happy coding!

Top 10 Questions and Answers on Managing Form State and Validation in Next.js

Managing form state and validation in a Next.js application can be streamlined with the right approach. Here are ten common questions about the topic, each with detailed answers:

1. What are the advantages of using React's useState or useReducer for managing form state in Next.js?

Answer: Using React's useState or useReducer for form state management in Next.js offers several advantages:

• Simplicity: useState is simple and straightforward for basic form scenarios. It handles a single piece of state or a small object, making it easy to manage and update.

• Complexity Handling: useReducer is beneficial for more complex forms with deeply nested or interrelated state. It helps in maintaining cleaner and more testable code by separating logic from presentation.

• State Predictability: useReducer enhances predictability in how state transitions occur due to actions, making debugging easier.

Example:

// Using useState
const [formData, setFormData] = useState({ name: '', email: '' });

// Using useReducer
const [state, dispatch] = useReducer(reducer, { name: '', email: '' });

function reducer(state, action) {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    default:
      return state;
  }
}

2. How can you integrate a library like Formik with Next.js for better form management?

Answer: Formik is a popular library for form management in React that allows for easier state management, validation, and submission handling. Here's how you can integrate it into a Next.js project:

1. Install Formik:

   npm install formik
   

2. Create a Form Component:

   import { useFormik } from 'formik';
   
   function MyForm() {
     const formik = useFormik({
       initialValues: { email: '', password: '' },
       onSubmit: async (values) => {
         // Handle submission
         console.log(values);
       },
       validate: (values) => {
         const errors = {};
         if (!values.email) {
           errors.email = 'Required';
         }
         if (!values.password) {
           errors.password = 'Required';
         }
         return errors;
       },
     });
   
     return (
       <form onSubmit={formik.handleSubmit}>
         <div>
           <label htmlFor="email">Email Address</label>
           <input
             id="email"
             name="email"
             type="email"
             onChange={formik.handleChange}
             value={formik.values.email}
           />
           {formik.touched.email && formik.errors.email ? (
             <div>{formik.errors.email}</div>
           ) : null}
         </div>
   
         <div>
           <label htmlFor="password">Password</label>
           <input
             id="password"
             name="password"
             type="password"
             onChange={formik.handleChange}
             value={formik.values.password}
           />
           {formik.touched.password && formik.errors.password ? (
             <div>{formik.errors.password}</div>
           ) : null}
         </div>
         <button type="submit">Submit</button>
       </form>
     );
   }
   

3. What are the benefits of using Yup in combination with Formik for validation in Next.js?

Answer: Yup is a powerful schema validation library that can work seamlessly with Formik to provide robust validation capabilities:

• Declarative Validation: Yup's schema syntax is declarative and expressive, making it easy to define even complex validation rules.
• Async Validation: Yup supports asynchronous validation, useful for scenarios such as checking if an email is already in use.
• Integrated with Formik: Integration with Formik is straightforward, allowing you to leverage Yup's powerful validation features without extra boilerplate.

Example:

import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email address').required('Email is required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
});

function MyForm() {
  const formik = useFormik({
    initialValues: { email: '', password: '' },
    validationSchema,
    onSubmit: (values) => {
      console.log(values);
    },
  });

  // ... rest of form component
}

4. Can you provide an example of client-side form validation in Next.js without these libraries?

Answer: Absolutely! Here's an example of client-side form validation in Next.js using plain React:

import { useState } from 'react';

export default function MyForm() {
  const [formState, setFormState] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});

  const validateForm = ({ email, password }) => {
    let errors = {};

    if (!email) {
      errors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      errors.email = 'Email address is invalid';
    }

    if (!password) {
      errors.password = 'Password is required';
    } else if (password.length < 6) {
      errors.password = 'Password must be at least 6 characters';
    }

    return errors;
  };

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = validateForm(formState);
    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      console.log('Form submitted!', formState);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email Address:</label>
        <input
          type="email"
          name="email"
          value={formState.email}
          onChange={handleChange}
        />
        {errors.email && <div>{errors.email}</div>}
      </div>

      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formState.password}
          onChange={handleChange}
        />
        {errors.password && <div>{errors.password}</div>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

5. How should you handle form state in a server-rendered application like Next.js?

Answer: Handling form state in Next.js involves maintaining client-side state while ensuring server render compatibility:

1. Client-Side State Management: Use React's useState or useReducer to manage form state on the client-side.

2. Server-Side Rendering (SSR): Ensure that form state is not populated on the server side; this avoids hydration mismatches between the server-rendered output and the client-rendered output. Typically, form state is controlled by the client-side application after initial render.

3. Initial State: If necessary, you can pass initial state down to the client via props.

Example:

import { useState } from 'react';

const MyForm = ({ initialData }) => {
  const [formData, setFormData] = useState(initialData);

  // Handle form changes and submission...
  
  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
    </form>
  );
};

export const getServerSideProps = async () => {
  const initialData = {
    name: '',
    email: ''
  };
  return { props: { initialData } };
};

export default MyForm;

6. What are the best practices for form submission in Next.js?

Answer: Best practices for form submission in Next.js include:

1. Prevent Default Behavior: Always prevent the default form submission using e.preventDefault().

2. Validate Input: Perform client-side validation for quick feedback. Server-side validation is also crucial.

3. Handle Asynchronous Requests: Use asynchronous functions for form submissions to handle API requests.

4. Loading States: Update the UI with loading states to indicate that data is being processed.

5. **Error Handling:**Gracefully handle errors, providing feedback to the user.

6. Persist Form Data: Consider persisting form data using local storage or session storage in case of navigation or page reloads.

Example:

const handleSubmit = async (e) => {
  e.preventDefault();
  const newErrors = validateForm(formState);
  setErrors(newErrors);

  if (Object.keys(newErrors).length === 0) {
    setIsSubmitting(true);
    setSubmissionSummary(null);
    setSubmissionFailed(false);

    try {
      // Submit data to API
      const response = await fetch('/api/submitData', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formState)
      });
      if (response.ok) {
        setSubmissionSummary('Success!');
      } else {
        setSubmissionFailed(true);
      }
    } catch (err) {
      console.error('Error during submission', err);
      setSubmissionFailed(true);
    } finally {
      setIsSubmitting(false);
    }
  }
};

7. Can you explain how to handle file uploads with forms in Next.js?

Answer: Handling file uploads in Next.js involves capturing the file input in the form and then sending it to the server for processing:

1. Capture File Input: Use a ref or onChange event to capture the file input.

2. Form Submission: Use the FormData API to construct the form body, including the file, and then submit it to the server via an HTTP request.

3. API Route Handling: Create an API route in Next.js to handle the file upload, ensuring proper file handling and storage.

Example:

import { useState, useRef } from 'react';

function FileUploadForm() {
  const [file, setFile] = useState(null);
  const fileInputRef = useRef(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        alert('File uploaded successfully!');
      } else {
        alert('Error uploading file.');
      }
    } catch (error) {
      console.error('Error uploading file:', error);
      alert('An error occurred while uploading the file.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" ref={fileInputRef} onChange={handleFileChange} />
      <button type="submit">Upload File</button>
    </form>
  );
}

export default FileUploadForm;

To handle the upload on the server-side, create an API route (pages/api/upload.js) that processes the file:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const form = new FormData(req);
    const file = form.get('file');

    // Process file...
    // Save to disk or cloud storage

    res.status(200).json({ message: 'Uploaded successfully' });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

8. How do you manage complex dependencies and side effects in form fields using Next.js?

Answer: Managing complex dependencies and side effects within form fields in Next.js is crucial for ensuring smooth performance and maintainability:

1. Use useEffect Hook: Leverage React's useEffect hook to manage side effects, such as fetching data for dependent inputs.

2. Memoize Calculations: Use useMemo or useCallback to memoize calculations or functions that depend on form state to avoid unnecessary re-renders.

3. Controlled Components: Ensure that form fields are controlled components, where their values are directly tied to state managed in the parent component.

4. Dependency Arrays: Carefully set up dependency arrays in useEffect to only re-run the effect when necessary dependencies change.

Example:

import { useState, useEffect } from 'react';

function DependentForm() {
  const [formState, setFormState] = useState({ country: '', city: '' });
  const [cities, setCities] = useState([]);

  useEffect(() => {
    async function fetchCities(country) {
      if (country) {
        const response = await fetch(`/api/cities?country=${country}`);
        const data = await response.json();
        setCities(data.cities);
      }
    }
    fetchCities(formState.country);
  }, [formState.country]); // Only re-run effect when country changes

  return (
    <form>
      <div>
        <label>Country:</label>
        <select
          name="country"
          value={formState.country}
          onChange={(e) => setFormState({ ...formState, country: e.target.value })}
        >
          <option value="">Select a country</option>
          <option value="US">United States</option>
          <option value="CA">Canada</option>
        </select>
      </div>

      <div>
        <label>City:</label>
        <select
          name="city"
          value={formState.city}
          onChange={(e) => setFormState({ ...formState, city: e.target.value })}
        >
          <option value="">Select a city</option>
          {cities.map((city) => (
            <option key={city} value={city}>{city}</option>
          ))}
        </select>
      </div>
    </form>
  );
}

export default DependentForm;

9. How can you ensure form accessibility in a Next.js application?

Answer: Ensuring form accessibility in a Next.js application involves following best practices for accessibility:

1. Labeling: Ensure every form element has a properly associated label. Use the htmlFor attribute on labels to match the id of form fields.

2. Semantic HTML: Use semantic HTML elements (<form>, <label>, <input>, <button>).

3. Keyboard Navigation: Ensure all interactive elements are accessible via keyboard. Focus states should be clearly visible.

4. ARIA Attributes: Use ARIA (Accessible Rich Internet Applications) attributes where necessary to improve accessibility, such as aria-required, aria-describedby, etc.

5. Error Indication: Clearly indicate form errors and provide descriptive error messages next to the corresponding fields.

6. Error Summary: Provide a summary of all form errors at the top of the form for easy reference.

7. Consistent Layout: Maintain a consistent layout and structure to aid screen readers in navigation.

Example:

function AccessibleForm() {
  return (
    <form>
      <h2>Accessible Form</h2>
      <div>
        <label htmlFor="name">Name*</label>
        <input
          id="name"
          name="name"
          type="text"
          aria-required="true"
          aria-describedby="name-error"
        />
        <div id="name-error" role="alert">
          Name is required
        </div>
      </div>

      <div>
        <label htmlFor="email">Email*</label>
        <input
          id="email"
          name="email"
          type="email"
          aria-required="true"
          aria-describedby="email-error"
        />
        <div id="email-error" role="alert">
          Email is required and must be a valid email
        </div>
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

export default AccessibleForm;

10. How can you optimize performance for large forms in Next.js?

Answer: Optimizing performance for large forms in Next.js involves several strategies:

1. Debounce and Throttle: Debounce or throttle input events to limit the frequency at which state is updated, improving performance.

2. Virtualization: Use libraries like react-window or react-virtualized to virtualize large lists or grids, rendering only visible items.

3. Pagination: Break large forms into smaller sections or pages to load them lazily as needed.

4. Lazy Load: Lazy load non-essential form components to reduce initial load time.

5. Memoization: Use useMemo or useCallback to memoize components or functions that remain unchanged across renders.

6. Conditional Rendering: Only render form elements that are visible or relevant, avoiding unnecessary DOM nodes.

7. Optimize State Updates: Minimize state updates and batch updates where possible to reduce re renders.

Example:

import { useState, useEffect, useMemo } from 'react';
import debounce from 'lodash.debounce';

function LargeForm() {
  const [formData, setFormData] = useState({});
  const [debouncedSearch, setDebouncedSearch] = useState('');

  const formSections = useMemo(() => [
    {
      title: 'Section 1',
      fields: [
        { label: 'First Name', name: 'firstName', type: 'text' },
        { label: 'Last Name', name: 'lastName', type: 'text' },
      ],
    },
    {
      title: 'Section 2',
      fields: [
        { label: 'Email', name: 'email', type: 'email' },
        { label: 'Phone', name: 'phone', type: 'text' },
      ],
    },
  ], []);

  useEffect(() => {
    if (debouncedSearch) {
      console.log('Search:', debouncedSearch);
    }
  }, [debouncedSearch]);

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

  return (
    <form>
      {formSections.map((section) => (
        <div key={section.title}>
          <h2>{section.title}</h2>
          {section.fields.map((field) => (
            <div key={field.name}>
              <label>
                {field.label}
                <input
                  type={field.type}
                  name={field.name}
                  onChange={handleInputChange}
                />
              </label>
            </div>
          ))}
        </div>
      ))}
    </form>
  );
}

export default LargeForm;

These strategies and examples should help you effectively manage form state and validation in your Next.js applications.