Chessboard does not always render position updates

[hwkerr]

I've been working on building an app with Chessboardjsx that allows me to navigate through a list of board positions. I've really appreciated this package so far, but I believe I've encountered a problem. Given the following code, the Chessboard does not always update to the new position on button click. Sometimes it takes two increments/decrements for the board to catch up and update.

One example of the issue can be seen by clicking 1. Next, 2. Next, 3. Previous, 4. Previous. If you try for yourself, you'll notice that the board only updates on clicks 1, 2, and 4, but not 3. The issue seems to happen any time you switch direction from Next to Previous or vice versa.

Thank you very much for your help. Please let me know if there's any more information I can provide about this issue.

I've also forked your demo board so that you can see the issue in this sandbox: https://codesandbox.io/s/chessboardjsx-withmovevalidation-v2-forked-yxqgo

const fens = [
    'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
    'rnbqkbnr/pppppppp/8/8/3P4/8/PPP1PPPP/RNBQKBNR b KQkq d3 0 1',
    'rnbqkbnr/ppp1pppp/8/3p4/3P4/8/PPP1PPPP/RNBQKBNR w KQkq d6 0 2',
    'rnbqkbnr/ppp1pppp/8/3p4/3P1B2/8/PPP1PPPP/RN1QKBNR b KQkq - 1 2',
    'rnbqkbnr/pp2pppp/2p5/3p4/3P1B2/8/PPP1PPPP/RN1QKBNR w KQkq - 0 3',
    'rnbqkbnr/pp2pppp/2p5/3p4/3P1B2/5N2/PPP1PPPP/RN1QKB1R b KQkq - 1 3',
    'rnbqkbnr/pp3ppp/2p1p3/3p4/3P1B2/5N2/PPP1PPPP/RN1QKB1R w KQkq - 0 4',
    'rnbqkbnr/pp3ppp/2p1p3/3p4/3P1B2/4PN2/PPP2PPP/RN1QKB1R b KQkq - 0 4',
    'r1bqkbnr/pp1n1ppp/2p1p3/3p4/3P1B2/4PN2/PPP2PPP/RN1QKB1R w KQkq - 1 5'
];
const [position, setPosition] = useState(fens[0]);
const [index, setIndex] = useState(0);

const prevPos = () => {
    const newIndex = index-1;
    setPosition(fens[newIndex]);
    setIndex(newIndex);
    console.log('prev');
}
const nextPos = () => {
    const newIndex = index+1;
    setPosition(fens[newIndex]);
    setIndex(newIndex);
    console.log('next');
}

return (
        <div>
            <Chessboard
                position={position}
            />
            <button onClick={prevPos}>Prev</button>
            <button onClick={nextPos}>Next</button>
        </div>
    );

[willb335]

Hi @hwkerr, I see your point. I am currently not maintaining the project because it's in a need of a rewrite which I do not have time for. I hope you understand and if you would like to make a pr I can take a look and merge it in.

[hwkerr]

Thanks for your response @willb335, that's understandable. I'll look into it myself and make a pr if I come up with a solution.

[willb335]

@hwkerr on npm if you choose not to use your fork. Thanks!

[hwkerr]

Fantastic! Thanks for making that happen