hookform devtools causing infinite loading

[sumanbyte]

Issue: Infinite Loading with @hookform/devtools in a React App

Packages Used

• react-hook-form: 7.54.1
• @hookform/devtools: 4.3.2
• Build Tool: Vite (latest)

---

Problem Description

I am using a simple React application with react-hook-form and @hookform/devtools. When I include the <DevTool> component in my app, it causes an infinite loading loop during development. However, when I remove the <DevTool> component, everything works as expected.

---

Code Example

Here’s the code for my app:

import { useForm } from "react-hook-form";
import { DevTool } from "@hookform/devtools";

function App() {
  const form = useForm(); // Initialize the form
  const { register } = form; // Extract necessary methods

  return (
    <div>
      <form
        action="/submit"
        method="post"
        className="flex flex-col h-screen w-full max-w-[800px] mx-auto gap-4"
      >
        <label htmlFor="username">Username</label>
        <input
          className="border border-black p-0.5"
          type="text"
          placeholder="Name"
          {...register("username")}
        />

        <label htmlFor="email">Email</label>
        <input
          className="border border-black p-0.5"
          type="email"
          {...register("email")}
          placeholder="Email"
        />

        <label htmlFor="channel">Channel</label>
        <input
          className="border border-black p-0.5"
          type="text"
          {...register("channel")}
          placeholder="Channel"
        />

        <button type="submit">Submit</button>
      </form>

      {/* DevTool causes infinite loading */}
      <DevTool control={form.control} />
    </div>
  );
}

export default App;

[aqeelat]

I'm also having the same issue.

[mborecki]

I had to downgrade to:

"react-hook-form": "7.53.1",
"@hookform/devtools": "4.3.1",

[sumanbyte]

Thanks now it is solved.