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];
 };