promises

When you return something from a callback function of .then() method, if that return value is a non-promise value, then it is implicitly wrapped in a promise and then the promise returned by that .then() method is fulfilled with that non-promise value.

On the other hand, if the return value of the callback function is itself a promise, then the promise returned by the .then() method gets resolved to the promise returned by the callback function. This means that the fate of the promise returned by the .then() method now depends on whatever happens to the promise returned by the callback function.

Example: Assume that the promise returned by the .then() method is promiseThen and the promise returned by the callback function is promiseCallback. Now, if the promiseCallback is fulfilled, then the promiseThen will also fulfill with the value with which promiseCallback fulfilled and this value is what will be passed to the next .then() method, if there is one. Similarly, if promiseCallback is rejected, then promiseThen will also get rejected.

Map to an array of Promises that resolves to an entry array (an array with 2 elements, a key and a value), and use Promise.all and then Object.fromEntries to turn it back into an object.

Easy to see the difference

I've solved a similar problem (maybe the same?) by setting up my interceptor as a function that takes a router parameter and using metadata on my routes, like this:

Interceptor.js

it seems like You are missing { } character after the declaration of function btnHandler, just add that character:

Just cancel it because its version updated

Instead of

When you .catch() in a chain of promises, it means you already handled the error, and subsequent .then() calls continue successfully.

For example:

There are few things that need to be fixed.

1. In your handleClick, you are using setSquares((squares) => squares.splice(i, 1, "X")). squares.splice will mutate the state variable squares which one should never do.
2. Also splice doesn't return updated array but

An array containing the deleted elements.

This causes squares from [null, null, null, null, null, null, null, null, null] to [null] causing you board to become blank for a moment. Then your setSquares((squares) => [...squares2]) kicks in from setTimeout making squares back to array making your square values visible again hence, the flash.

1. computersTurnHandler might return undefined in some cases where none of the return statements trigger hence

Uncaught TypeError: squares2 is undefined handleClick Board.js:34

1. You need to prevent user from clicking until your setTimeout is complete else multiple rapid clicks by user will cause inconsistent behaviour.

As for your query

is it acceptable at all to use Promises in that case

Usually situations like these can simply be solved by making use of temporary variable in most cases.

Now the Solution with promise and fixed handleClick and computersTurnHandler is as follows