Repository: react
Issue: Bug: Repeated state setter callbacks when callback throws
Labels: Resolution: Expected Behavior

It's a minor thing, but confusing: If you call a `useState` state setter and the callback throws, React calls the state setter callback twice more before allowing the error to propagate to the console (then twice more after that, with a development build). This obscures the nature of the error. I'd expect the callback to be called just once. This happens both with dev and prod builds of the library (though the number of calls varies), and without `StrictMode`.

React version: 18.2.0

## Steps To Reproduce

1. Call a state setter passing in a callback that throws

Link to code example: https://codesandbox.io/s/react-state-setter-oddity-40jgq5?file=/src/index.js (but look in the actual console, not the CodeSandbox console, it doesn't show everything).

```js
function App() {
    const [value, setValue] = useState(0);

    const update = () => {
        console.log("calling state setter");
        setValue((v) => {
            console.log("state setter callback called");
            if (Math.random() < 1) {
                //           ^^^^ Always true, just to fool ESLint
                throw new Error("!!"); // <== Stand-in for code that throws unexpectedly
            }
            console.log("state setter callback returned");
            return v + 1;
        });
    };

    return (
        <div className="app">
            <div>Value: {value}</div>
            <input type="button" onClick={update} value="Update" />
        </div>
    );
}
```

## The current behavior

In development, calling `update` causes the state setter callback to be called a total of five times: Three prior to the error being reported in the console, then twice more, with the error appearing a total of three times.

```text
calling state setter
state setter callback called
state setter callback called
state setter callback called
Uncaught Error: !!
    at ...
state setter callback called
state setter callback called
Uncaught Error: !!
    at ...
The above error occurred in...
Uncaught Error: !!
    at ...
```

WIth a production build, the state setter callback is called three times, and the error reported twice (https://thenewtoys.dev/temp/react-repeating-state-setter):

```text
calling state setter
state setter callback called
state setter callback called
state setter callback called
Error: !!
    at ...
Uncaught Error: !!
    at ...
```

## The expected behavior

Calling `update` should cause the state setter callback to be called just once, and the error to be reported just once.

```text
calling state setter
state setter called
Uncaught Error: !!
    at ...
The above error occurred in...
```

As I say, it's a minor thing, but the current behavior obscures the nature of the error. In my case, the error I was getting *seemed* to be a result of the repeated (seemingly-recursive) calls to the callback, so I was looking for a way **my code** could be doing that (since [`select` isn't broken](https://pragprog.com/tips/#:~:text=%E2%80%9Cselect%E2%80%9D%20Isn%27t%20Broken) :-) ). But eventually I realized it was **React** doing the repeated calls.