---
title: "How To Debug React Hook Form Errors: Use Simple useEffect"
slug: "how-to-debug-react-hook-form-errors-use-simple-useeffect"
published: "2025-03-18"
updated: "2025-12-21"
categories:
  - "React"
llm-intent: "reference"
framework-versions:
  - "react@18"
  - "react-hook-form@8"
status: "stable"
llm-purpose: "Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions"
llm-prereqs:
  - "General familiarity with the article topic"
llm-outputs:
  - "Completed outcome: Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions"
---

**Summary Triples**
- (useEffect + form.watch, is used to, log every change to form values so you can confirm inputs are being received)
- (form.watch subscription, requires, cleanup via subscription.unsubscribe() inside the useEffect return to avoid leaks)
- (useEffect + form.formState.errors, is used to, log validation errors that may prevent handleSubmit from firing)
- (Silent submit (no console logs), is often caused by, validation errors or a missing/incorrectly wired handleSubmit on the form)
- (Two debugging hooks, reveal, whether the issue is missing input updates or validation failures)
- (Logged output, helps, identify nested or dynamic field shapes that might fail validation)

### {GOAL}
Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions

### {PREREQS}
- General familiarity with the article topic

### {STEPS}
1. Follow the detailed walkthrough in the article content below.

<!-- llm:goal="Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions" -->
<!-- llm:prereq="General familiarity with the article topic" -->
<!-- llm:output="Completed outcome: Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions" -->

# How To Debug React Hook Form Errors: Use Simple useEffect
> Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions
Matija Žiberna · 2025-03-18

## The Problem

Sometimes, when you create a form using React Hook Form, you might encounter an issue where clicking the submit button does nothing. No console logs, no terminal errors—just silence. This can be frustrating, but there's a quick way to debug this issue using two `useEffect` hooks.

## Adding Debug Logs with `useEffect`

To diagnose the issue, you can use two `useEffect` hooks to log form value changes and form errors. These logs help identify whether the form is receiving inputs correctly and if there are validation errors preventing submission.

### Step 1: Log Form Value Changes

Add this `useEffect` to monitor form state changes:

```typescript
useEffect(() => {
  const subscription = form.watch((value) => {
    console.log("Form values changed:", value);
  });

  return () => subscription.unsubscribe();
}, [form]);
```

### Step 2: Log Form Errors

Another common reason why a form might not submit is due to validation errors. To debug this, log the form's `errors` state:

```typescript
useEffect(() => {
  console.log("Form errors:", form.formState.errors);
}, [form.formState.errors]);
```

With these two hooks in place, you can see in the console:

1.  When form values change.
2.  If there are validation errors preventing submission.

## Example Log Output

Here's an example of what might appear in the console when form values change:

```typescript
Form values changed:  {
    "formId": "0U_Kzb-i4n",
    "name": {
        "value": "Matija",
        "hide": false
    },
    "businessName": {
        "value": "Racunalikso svetovanje sp",
        "hide": false
    },
    "services": [
        {
            "id": "6_0tkC",
            "name": {
                "value": "odbinave nomet",
                "hide": false
            },
            "order": {
                "value": 0,
                "hide": false
            },
            "description": {
                "value": "asdas",
                "hide": false
            }
        },
        {
            "id": "Bdie1P",
            "name": {
                "value": "fasada",
                "hide": false
            },
            "order": {
                "value": 1,
                "hide": false
            },
            "description": {
                "value": "sdas",
                "hide": false
            }
        }
    ],
    "serviceArea": [
        {
            "id": "2",
            "description": "Pomurska"
        },
        {
            "id": "3",
            "description": "Podravska"
        },
        {
            "id": "10",
            "description": "Primorsko-notranjska"
        }
    ],
    "email": {
        "value": "ricarod@asd.asd"
    },
    "phone": {
        "value": "1231231as"
    },
    "preferredCommunication": [
        "Messenger"
    ]
}
```

## Example: Debugging a Contact Form

Here's how you can integrate the debugging hooks into a `Contact` form component using `react-hook-form` and `zod` for validation:

```typescript
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "../ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { useEffect } from "react";
import { useFormStep } from "@/lib/hooks/use-form-step";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const CommunicationMethodEnum = z.enum(["Messenger", "WhatsApp", "SMS", "Phonecall"]);
const contactSchema = z.object({
  email: z.string().email({ message: "Please enter a valid email address." }),
  phone: z.string().min(5, { message: "Please enter a valid phone number." }),
  preferredCommunication: z.array(CommunicationMethodEnum).min(1, { message: "Please select at least one communication method." })
});

export function Contact({ currentStep }) {
  const form = useForm({
    resolver: zodResolver(contactSchema),
    defaultValues: { email: "", phone: "", preferredCommunication: [] }
  });

  const { handleBack, handleNext } = useFormStep({ currentStep });

  // Debugging hooks
  useEffect(() => {
    const subscription = form.watch((value) => {
      console.log("Form values changed:", value);
    });
    return () => subscription.unsubscribe();
  }, [form]);

  useEffect(() => {
    console.log("Form errors:", form.formState.errors);
  }, [form.formState.errors]);

  const onSubmit = (data) => {
    handleNext(data);
  };

  return (
    <Card className="border-none shadow-none">
      <CardHeader>
        <CardTitle>Contact Information</CardTitle>
        <CardDescription>
          Please provide your contact details for communication.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email Address</FormLabel>
                  <FormControl>
                    <Input placeholder="email@example.com" type="email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="flex justify-between pt-4">
              <Button type="button" variant="outline" onClick={handleBack}>
                Back
              </Button>
              <Button type="submit">Next</Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}
```

## Conclusion

If your React Hook Form is not submitting and not throwing errors, use these two `useEffect` hooks:

1.  **Log form values** to check if inputs are updating correctly.
2.  **Log form errors** to identify any validation issues.

By adding these simple debugging techniques, you can quickly diagnose why your form is not behaving as expected and fix any underlying issues.

## LLM Response Snippet
```json
{
  "goal": "Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions",
  "responses": [
    {
      "question": "What does the article \"How To Debug React Hook Form Errors: Use Simple useEffect\" cover?",
      "answer": "Fix React Hook Form issues fast! Learn how to debug forms using useEffect, log errors, and troubleshoot validation problems for seamless submissions"
    }
  ]
}
```