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.

[soywod]

Sorry for the long delay. I was able to reproduce the issue during tests, using the reactStrictMode option. I let you know whenever a fix is available, I will release a new version straight with React 19 support #93.

[soywod]

I dived a bit more into this issue, and it turns out that it is completely normal. According to their docs:

Components breaking this rule behave unpredictably and cause bugs. To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) twice in development. This includes:

• Your component function body (only top-level logic, so this doesn’t include code inside event handlers)
• Functions that you pass to useState, set functions, useMemo, or useReducer
• Some class component methods like constructor, render, shouldComponentUpdate (see the whole list)

If a function is pure, running it twice does not change its behavior because a pure function produces the same result every time. However, if a function is impure (for example, it mutates the data it receives), running it twice tends to be noticeable (that’s what makes it impure!) This helps you spot and fix the bug early.