diff --git a/src/VideoGrid.jsx b/src/VideoGrid.jsx index 3780d6c4..1a665b09 100644 --- a/src/VideoGrid.jsx +++ b/src/VideoGrid.jsx @@ -5,6 +5,20 @@ import styles from "./GridDemo.module.css"; import useMeasure from "react-use-measure"; import moveArrItem from "lodash-move"; +function useIsMounted() { + const isMountedRef = useRef(false); + + useEffect(() => { + isMountedRef.current = true; + + return () => { + isMountedRef.current = false; + }; + }, []); + + return isMountedRef; +} + function isInside([x, y], targetTile) { const left = targetTile.x; const top = targetTile.y; @@ -113,6 +127,7 @@ export function VideoGrid({ participants }) { tilePositions: [], }); const draggingTileRef = useRef(null); + const isMounted = useIsMounted(); // Contains tile indices // Tiles are displayed in the order that they appear @@ -166,6 +181,10 @@ export function VideoGrid({ participants }) { if (removedTileKeys.length > 0) { // TODO: There's a race condition in this nested set state when you quickly add/remove setTimeout(() => { + if (!isMounted.current) { + return; + } + setTileState(({ tiles }) => { const newTiles = tiles.filter( (tile) => !removedTileKeys.includes(tile.key)