Fix optimistic state (#11556)

web/src/hooks/use-optimistic-state.ts

@@ -3,11 +3,11 @@ import { useState, useEffect, useCallback, useRef } from "react";
 type OptimisticStateResult<T> = [T, (newValue: T) => void];
 
 const useOptimisticState = <T>(
-  initialState: T,
+  currentState: T,
   setState: (newValue: T) => void,
   delay: number = 20,
 ): OptimisticStateResult<T> => {
-  const [optimisticValue, setOptimisticValue] = useState<T>(initialState);
+  const [optimisticValue, setOptimisticValue] = useState<T>(currentState);
   const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleValueChange = useCallback(
@@ -37,6 +37,16 @@ const useOptimisticState = <T>(
     };
   }, []);
 
+  useEffect(() => {
+    if (currentState != optimisticValue) {
+      setOptimisticValue(currentState);
+    }
+    // sometimes an external action will cause the currentState to change
+    // without handleValueChange being called. In this case
+    // we need to update the optimistic value so the UI reflects the change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentState]);
+
   return [optimisticValue, handleValueChange];
 };