Doesn't the Usage / Basic example in the README has an async issue?

[zekicaneksi]

I was trying to implement this board to my site. But sometimes, even tho my move was valid even though the board registered my move (didn't put my piece back into its original position), the "move" variable's value still null. I changed the value to "123", and made many invalid moves on purpose. And logged the "move"s value. And what do i see? It's sometimes 123 and sometimes null. I'm a newbie developer and this issue put me two days behind because no errors, no nothing and sometimes gives errors, and sometimes doesn't...

  const [game, setGame] = useState(new Chess());

  function safeGameMutate(modify) {
    setGame((g) => {                  <---- ASYNC FUNCTION, so this kinda makes the safeGameMutate function an async function
      const update = { ...g };
      modify(update);
      return update;
    });
  }
  
  function onDrop(sourceSquare, targetSquare) {
    let move = null;
    safeGameMutate((game) => {                    <-------- Calling an async function to set the move variable. and instantly after, checking it's value.
      move = game.move({
        from: sourceSquare,
        to: targetSquare,
        promotion: "q", // always promote to a queen for example simplicity
      });
    });
    if (move === null) return false; // illegal move
    setTimeout(makeRandomMove, 200);
    return true;
  }

My solution for my instance was to just use game.move() before hands, if it didn't return null, i just updated the board with the safeGameMutate function.

[Clariity]

You raise a very good point, this was written back when I had less of an idea about state update rules and I hadn't thought to look back at it, so good catch.

The good news is that there is a simple solution, which I think maybe is the one you've done but I'm not sure from the description.

The solution is actually already implemented in another example, so I must have found this issue at some point but not updated other examples:

function onDrop(sourceSquare, targetSquare) {
    const gameCopy = { ...game };
    const move = gameCopy.move({
      from: sourceSquare,
      to: targetSquare,
      promotion: 'q' // always promote to a queen for example simplicity
    });
    setGame(gameCopy);

    // illegal move
    if (move === null) return false;

    // store timeout so it can be cleared on undo/reset so computer doesn't execute move
    const newTimeout = setTimeout(makeRandomMove, 200);
    setCurrentTimeout(newTimeout);
    return true;
  }

[zekicaneksi]

Now that taking a look at your solution, even though my solution worked, it was not safe for other reasons, and yours is much better, thanks! xd

Also, as a newbie programmer "catching" this issue was a long and painful process for me, believe me xd i thought about abandoning my project even. I trusted you more than myself, thought that i was using it wrong rather than it being wrong.

Anyways, thanks a lot. This is a very nice package/library or whatever its called. Have a nice one <3