customArrows props creates infinite loops. about react-chessboard

[Manukyanq]

Yes, my guess seems right, when you call onArrowsChange it sets new state by triggering setArrows(arrowsData);. after that here in useArrows.ts we trigger onArrowsChange again it causes infinite loop because of Array.from which creates new arrows array with different reference .

I would think about correct solution, have to discuss with @Clariity what we can do

As an dirty temporary hack i will suggest you to add extra check in your function

const arrowDrow = (arrowsData: Square[][]) => {
        if (arrowsData.length === 0 && arrowsData !== arrows) {
            setArrows([]);
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
        } else {
            // this should stop endless loop
            if(arrowsData.flat().join() === arrows.flat().join()) return

            setArrows(arrowsData);
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
        }
    };

[LalaSimon]

Thank you very much @Manukyanq, it works now!!

[Clariity]

Thank you for responding whilst I was away on holiday @Manukyanq

For the line you references in useArrows.ts:

// callback when new arrows are set
  useEffect(() => {
    onArrowsChange?.(toArray(arrows));
  }, [arrows]);

I think we need to change the implementation so that this is only called when the change comes from within the board, and not from an external arrows prop change, and the name should be changed as to not cause confusion i.e. onArrowsBoardChange

this is because if it's coming externally from then the user can handle the change externally

[Manukyanq]

Hi!

take a look to useArrows.ts which is used for arrows state managment.
if you change customArrows inside your onArrowsChange function, it might be the cause of infinitive loop.

Sharing your code will be much helpful for understanding whats exactly is going on, and I can raise a PR with fix

[LalaSimon]

Thank you for fast answer, i will try my best, so onArrowsChange im creating this function arrowDrow:

const [arrows, setArrows] = useState<Square[][]>([]);
const arrowDrow = (arrowsData: Square[][]) => {
        if (arrowsData.length === 0 && arrowsData !== arrows) {
            setArrows([]);
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
        } else {
            setArrows(arrowsData);
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
        }
    };

My server is responding with broadcast like this:

 socket.on("draw_arrows", (data) => {
        socket.broadcast.to(data.roomID).emit("arrows_drawn", data.arrowsData);
    });

And then client received it with this function:

socket.on("arrows_drawn", (arrowsData) => {
        setArrows(arrowsData);
    });

My component is rendered like this:

 <Chessboard
  customArrows={arrows}
  onArrowsChange={arrowDrow}
  onPieceDrop={onDrop}
  position={game.fen()}
  boardWidth={650}
/>

[Manukyanq]

btw, I don't understand why you need to call setArrows(arrowsData) at all in arrowDrow function? Does not this code works as expected?

const arrowDrow = (arrowsData: Square[][]) => {
        if (arrowsData.length === 0 && arrowsData !== arrows) {
            setArrows([]);
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
        } else {
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
        }
    };

in general all you need is call only socket.emit(...), don't call setArrows at all, Im almost sure it will work as expected

const arrowDrow = (arrowsData: Square[][]) => {
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
    };

[LalaSimon]

I tried it but it seems not working. First arrow is good but next ones are not showing for both users

const arrowDrow = (arrowsData: Square[][]) => {
            socket.emit("draw_arrows", {
                arrowsData,
                roomID,
            });
    };

I think i need to call setArrorws because i broadcast it on server side so its not coming back. When i tried to emit it instead of broadcasting its not working.

[Clariity]

fixed in #99

will release soon