From 0919be997c37c52762dafc9f4b357e9a49fbd5ea Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 18 Aug 2021 16:27:29 -0700
Subject: [PATCH] Debugging remove race condition WIP

---
 src/VideoGrid.jsx | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/VideoGrid.jsx b/src/VideoGrid.jsx
index de3ce473..f9693b7c 100644
--- a/src/VideoGrid.jsx
+++ b/src/VideoGrid.jsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { useDrag } from "react-use-gesture";
 import { useSprings, animated } from "@react-spring/web";
 import styles from "./GridDemo.module.css";
@@ -190,6 +196,10 @@ export function VideoGrid({ participants }) {
         tileOrderRef.current.push(tileOrderRef.current.length);
       }
 
+      if (newTiles.length !== tileOrderRef.current.length) {
+        debugger;
+      }
+
       if (removedTileKeys.length > 0) {
         // TODO: There's a race condition in this nested set state when you quickly add/remove
         setTimeout(() => {
@@ -198,15 +208,33 @@ export function VideoGrid({ participants }) {
           }
 
           setTileState(({ tiles }) => {
+            if (tiles.length !== tileOrderRef.current.length) {
+              debugger;
+            }
+
             const newTiles = tiles.filter(
               (tile) => !removedTileKeys.includes(tile.key)
             );
-            const removedTileIndices = removedTileKeys.map((tileKey) =>
-              tiles.findIndex((tile) => tile.key === tileKey)
+
+            const orderedTiles = tileOrderRef.current.map(
+              (index) => tiles[index]
             );
-            tileOrderRef.current = tileOrderRef.current.filter(
-              (index) => !removedTileIndices.includes(index)
+            const filteredTiles = orderedTiles.filter(
+              (tile) => !removedTileKeys.includes(tile.key)
             );
+            tileOrderRef.current = filteredTiles.map((tile) =>
+              newTiles.indexOf(tile)
+            );
+
+            if (newTiles.length !== tileOrderRef.current.length) {
+              debugger;
+            }
+
+            for (const index of tileOrderRef.current) {
+              if (index >= newTiles.length || index === -1) {
+                debugger;
+              }
+            }
 
             return {
               tiles: newTiles,