Maximum update depth exceeded when using PinField with React Hook Form Controller

[didiraja]

Hi.

First off, thanks for this useful library!

I'm currently working on a project where I'm integrating react-pin-field with react-hook-form. I'm trying to wrap the PinField component within react-hook-form's <Controller> component to manage its state.

Unfortunately, I've run into an issue where doing this causes an infinite re-render loop. As soon as I type the very first character into the pin field, the application freezes and the browser console throws the Maximum update depth exceeded error.

Steps to Reproduce:

1. Set up a basic form using react-hook-form.
2. Use the <Controller> component to wrap <PinField>.
3. Pass the onChange function from the Controller's render prop to the PinField's onChange prop.
4. Run the application and attempt to type into the pin input.

Code Snippet:

Here is a simplified example of my implementation that causes the bug:

import { Controller, useForm } from "react-hook-form";
import PinField from "react-pin-field";

// Inside my form component...
const { control, formState: { errors } } = useForm();

<Controller
  name="pin"
  control={control}
  render={({ field: { onChange } }) => (
    <PinField
      autoFocus
      length={6}
      placeholder="0"
      className="my-input-class" // Example class
      onChange={(value) => onChange(value)}
    />
  )}
/>

Actual Behavior:

The application immediately crashes upon the first keystroke in the PinField. The browser console shows the following error: Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. Error happens also with onComplete.

Environment:

• React: 18.3.1
• Next.js: 13.5.6
• react-hook-form: 7.62.0
• react-pin-field: 4.0.2

I hope this information is helpful for looking into the issue. Please let me know if you need any more details from my side.

Thanks!

[soywod]

Thanks for reporting the issue, I will give it a try as soon as possible.