Alert appearing twice in react

Question

Why this alert box is appearing twice in a simple useReducer Application,

Click here for the codesandbox link,

To regenerate the scenario

1. increase the value of input using up arrow (Press only once)
2. decrease the value of input by down key (Press only once)

here is the code

import "./styles.css";
import { useReducer } from "react";
const reducerFunction = (state, action) => {
  switch (action.type) {
    case "testing": {
      if (action.payload.value > 0) {
        return { ...state, testing: action.payload.value };
      } else {
        alert("some message");
        return state;
      }
    }
    default: {
      throw new Error("Invalid Action");
    }
  }
};
export default function App() {
  const defaultValue = {
    testing: 0
  };
  const [state, dispatch] = useReducer(reducerFunction, defaultValue);

  return (
    <input
      value={state.testing}
      onChange={(e) => {
        dispatch({ type: "testing", payload: { value: e.target.value } });
      }}
      type="number"
    />
  );
}

Answer 1

You are using StrictMode which invokes functions passed to useReducer twice, from docs:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Functions passed to useState, useMemo, or useReducer

// Remove Strict.Mode
ReactDOM.render(
  <App />,
  rootElement
);

Answer 2

Your initial state is this:

const defaultValue = {
  testing: 0
};

Which is bound to the input value, but then from your reducer you're returning:

return { inputValue: action.payload.value };

Causing testing to be undefined.

You can see this error in console:

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

Your code should be

return {...state, testing: action.payload.value };

This will show one alert and prevent negative values

Answer 3

Dennis is correct about the strict mode behavior which is causing the issue here.

If you still need to use strict mode in the project you can use the code below to update the same-

Code Sandbox Link