[react-hook-form] Typing fast results to max depth issue

[necm1]

Hi!

If you start typing to fast, it somehow throws a "maximum depth issue".

app-index.js:35 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at PhoneInput (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/react-phone-number-input@3.3.9_react-dom@18.2.0_react@18.2.0/node_modules/react-phone-number-input/modules/PhoneInput.js:113:26)
    at PhoneInput (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/react-phone-number-input@3.3.9_react-dom@18.2.0_react@18.2.0/node_modules/react-phone-number-input/modules/PhoneInputBrowser.js:64:30)
    at _c2 (webpack-internal:///(app-pages-browser)/../../packages/ui/src/components/input.tsx:33:11)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-slot@1.0.2_@types+react@18.2.55_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs:42:23)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/@radix-ui+react-slot@1.0.2_@types+react@18.2.55_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs:16:23)
    at eval (webpack-internal:///(app-pages-browser)/../../packages/ui/src/components/form.tsx:124:14)
    at div
    at eval (webpack-internal:///(app-pages-browser)/../../packages/ui/src/components/form.tsx:74:11)
    at Controller (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/react-hook-form@7.51.1_react@18.2.0/node_modules/react-hook-form/dist/index.esm.mjs:544:18)

Input.tsx:

import RPNInput, {
  PropsWithoutSmartCaret as RPNIProps,
  isValidPhoneNumber,
  isPossiblePhoneNumber,
} from 'react-phone-number-input/input';

const PhoneInput: React.ForwardRefExoticComponent<
  RPNIProps<React.InputHTMLAttributes<HTMLInputElement>>
> = React.forwardRef<
  React.ElementRef<typeof RPNInput>,
  RPNIProps<React.InputHTMLAttributes<HTMLInputElement>>
>(({ className, ...props }, ref) => {
  return (
    <RPNInput
      ref={ref}
      className={cn(className)}
      country="DE"
      international
      withCountryCallingCode
      useNationalFormatForDefaultCountryValue
      inputComponent={Input}
      {...props}
    />
  );
});
PhoneInput.displayName = 'PhoneInput';

Component.tsx:

            <FormField
              control={form.control}
              name="phoneNumber"
              render={({ field }) => (
                <FormItem className="flex flex-col flex-1">
                  <FormLabel>Telefonnummer</FormLabel>
                  <FormControl>
                    <PhoneInput {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
              rules={{
                required: 'Bitte geben Sie Ihre Telefonnummer ein.',
                validate: (value) => {
                  if (!value) {return true;}

                  console.log('test');

                  return (
                    isValidPhoneNumber(value, {
                      defaultCountry: 'DE',
                    }) || 'Bitte geben Sie eine gültige Telefonnummer ein.'
                  );
                },
              }}
            />

I thought it's due to my "validate" rule, but console.log never gets triggered. Just wondering.

When I type slowly, it seems to be working - anyway this shouldn't be the case if I start typing too fast or vice versa.

[catamphetamine]

Regardless of you code, if the issue was reproducible on the demo page it could be considered a proper bug report but unless it isn’t, it isn’t.

[gornyyvladimir]

Same error.
Next.js: 14.02
React hook form: 7.51.2

[GustavoLaraSantos]

I resolve this problem using use-debounce react library: https://www.npmjs.com/package/use-debounce

I put the onChange function inside a useDebounceCallback, here's an example.

const handleChange = (value) => {
    //handleChangeFunction
  };

const debouncedHandleCellphoneChange = useDebouncedCallback(
    (value) => {
      handleCellphoneChange(value);
    },
    1
  );

<PhoneInput
  country={country}
  value={value}
  onChange={debouncedHandleCellphoneChange}
  placeholder={placeholder}
/>

[blackmax1886]

same issue with react-hook-form. I tried debounce for onChange handler but it doesn't work.

import React from "react";
import { useDebouncedCallback } from "use-debounce";

import { cn } from "@acme/ui";
import { PhoneInput } from "react-phone-number-input/react-hook-form-input";

interface PhoneInputWrapperProps {
  name: string;
  placeholder?: string;
  required?: boolean;
  className?: string;
  onChange: (value: string) => void;
  defaultValue: string;
}

const PhoneInputWrapper: React.FC<PhoneInputWrapperProps> = ({
  name,
  placeholder,
  required,
  className,
  onChange,
  defaultValue,
}) => {
  const handleChange = useDebouncedCallback((value: string) => {
    onChange(value);
  }, 1);

  return (
    <PhoneInput
      country="JP"
      name={name}
      required={required}
      className={cn(
        "h-full rounded-md border-none bg-gray-100 px-3 py-4 text-lg placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
        className,
      )}
      placeholder={placeholder}
      onChange={handleChange}
      defaultValue={defaultValue}
    />
  );
};

export default PhoneInputWrapper;

it seems onChange property of PhoneInput does not override onChange Event. Without onChange, it works when normally typing.

Any ideas?

[GustavoLaraSantos]

same issue with react-hook-form. I tried debounce for onChange handler but it doesn't work.

import React from "react";
import { useDebouncedCallback } from "use-debounce";

import { cn } from "@acme/ui";
import { PhoneInput } from "react-phone-number-input/react-hook-form-input";

interface PhoneInputWrapperProps {
  name: string;
  placeholder?: string;
  required?: boolean;
  className?: string;
  onChange: (value: string) => void;
  defaultValue: string;
}

const PhoneInputWrapper: React.FC<PhoneInputWrapperProps> = ({
  name,
  placeholder,
  required,
  className,
  onChange,
  defaultValue,
}) => {
  const handleChange = useDebouncedCallback((value: string) => {
    onChange(value);
  }, 1);

  return (
    <PhoneInput
      country="JP"
      name={name}
      required={required}
      className={cn(
        "h-full rounded-md border-none bg-gray-100 px-3 py-4 text-lg placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
        className,
      )}
      placeholder={placeholder}
      onChange={handleChange}
      defaultValue={defaultValue}
    />
  );
};

export default PhoneInputWrapper;

it seems onChange property of PhoneInput does not override onChange Event. Without onChange, it works when normally typing.

Any ideas?

Did you try to increase the delay of debouncedCallback?

[roelvan]

I am having this issue too on next js and react-hook-form.

[Son1c-sound]

anyone came across this bug by this time? debounce works, just wondering what might be actual issue

[AwesomeDevin]

Regardless of you code, if the issue was reproducible on the demo page it could be considered a proper bug report but unless it isn’t, it isn’t.

i have same issue

[AwesomeDevin]

Regardless of you code, if the issue was reproducible on the demo page it could be considered a proper bug report but unless it isn’t, it isn’t.

i have same issue

GustavoLaraSantos's solution is ok.

[jingzhongchangan]

anyone fixed this with react-hook-form? Wrapping with debounce did fix the infinite re-render issue. but the text value can't be updated into the react-hook-form state.

[pangolingo]

I can reproduce this issue with React Hook Form on Next.js v14 and also v15.3 (the latest).

Here's a Code Sandbox with a minimal reproduction.

Steps to reproduce:

1. visit the Code Sandbox and run the application
2. open the page in the Code Sandbox browser
3. Type numbers very fast in the inputs. If you run out of space, clear the input and start typing numbers quickly again
4. Observe that sometimes the input will hang: the cursor will flash quickly and you won't be able to type. You'll also see a React error

Note that the above steps will work for React Hook Form inputs but not for the vanilla React input. They work with or without a specific country prop: <RHFPhoneNumberInput name="none-input" control={control} />

React error:

Error: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at createConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/errors/console-error.js:27:71)
    at handleConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/errors/use-error-handler.js:47:54)
    at console.error (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/globals/intercept-console-error.js:47:57)
    at getRootForUpdatedFiber (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:3868:17)
    at enqueueConcurrentHookUpdate (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:3821:14)
    at dispatchSetStateInternal (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:8080:18)
    at dispatchSetState (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:8041:7)
    at ResizeObserver.eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.0-canary.27_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.js:202:13)

[pangolingo]

While debugging this I tried implementing my own naive version of the RHF phone number input. And this exact same behavior occurs even in this very simple version.

 <Controller
        name={name}
        control={control}
        render={({ field }) => {
          return (
            <PhoneNumberInput
              country="US"
              onChange={(value) => field.onChange(value)}
              value={field.value}
            />
          );
        }}
      />

If I remove value={field.value} the issue no longer occurs, which makes sense. Of course with that removed, there is no ability to populate a default value.

[pangolingo]

I updated my CodeSandbox example to include a version that uses plain old React state (no React Hook Form). The issue still occurs here. This makes we wonder if it's caused by the interaction of Next.js and this library.

[pangolingo]

I set up a tiny Vite app confirmed that this issue still occurs without Next.js or React Hook Form. It happens both in Vite's dev mode, and in the compiled version.

However I can still NOT reproduce this on the project's demo page, which is very odd.

import { useState } from "react";
import PhoneInput from "react-phone-number-input/input";
import "./App.css";

function App() {
  const [value, setValue] = useState<any>();
  return (
    <>
      {value}
      <br />
      <PhoneInput country="US" value={value} onChange={setValue} />
    </>
  );
}

export default App;

"dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-phone-number-input": "^3.4.12"
  },