Execute twice when strictmode

[Mochamad-Rizky]

I'm having an issue where onComplete and other events are executing twice inside a React Strict Mode component called FormAuthPin.

My code:

export default function FormAuthPin({
  onCompletePin,
  isLoading,
  isError,
}: Props) {
  const pinRef = useRef<HTMLInputElement[]>([]);
  useEffect(() => {
    if (isError) {
      pinRef &&
        pinRef.current &&
        pinRef.current.forEach((input) => (input.value = ''));
    }
  }, [isError]);


  return (
    <PinField
      ref={pinRef}
      className={cn('pin-field', {
        complete: isLoading,
      })}
      autoFocus
      length={6}
      disabled={isLoading}
      onComplete={(value) => {
        console.log(value, 'value');
        // onCompletePin(value);
      }}
    />
  );
}

example (when i'm typing the last number): 123456

Result: (2x) 123456 value

[soywod]

I'm having an issue where onComplete and other events are executing twice inside a React Strict Mode component called FormAuthPin.

Thank you for the report, I will investigate as soon as I can.