Fix incorrect callback referencing

src/components/middle/composer/hooks/useDraft.ts

@@ -62,10 +62,6 @@ const useDraft = (
     }
   }, [chatId, threadId, isEditing, lastSyncTime, getHtml, saveDraft, clearDraft]);
 
-  const forceUpdateDraft = useCallback(() => {
-    updateDraft(undefined, true);
-  }, [updateDraft]);
-
   const updateDraftRef = useStateRef(updateDraft);
   const runDebouncedForSaveDraft = useRunDebounced(DRAFT_DEBOUNCE, true, undefined, [chatId, threadId]);
 
@@ -138,6 +134,10 @@ const useDraft = (
     });
   }, [chatIdRef, getHtml, runDebouncedForSaveDraft, threadIdRef, updateDraftRef]);
 
+  function forceUpdateDraft() {
+    updateDraft(undefined, true);
+  }
+
   useBackgroundMode(forceUpdateDraft);
   useBeforeUnload(forceUpdateDraft);
 };

src/hooks/useBackgroundMode.ts

@@ -1,6 +1,7 @@
 import { useEffect } from '../lib/teact/teact';
 
 import { createCallbackManager } from '../util/callbacks';
+import { useLastCallback } from './useLastCallback';
 
 const blurCallbacks = createCallbackManager();
 const focusCallbacks = createCallbackManager();
@@ -26,33 +27,26 @@ export default function useBackgroundMode(
   onFocus?: AnyToVoidFunction,
   isDisabled = false,
 ) {
+  const lastOnBlur = useLastCallback(onBlur);
+  const lastOnFocus = useLastCallback(onFocus);
+
   useEffect(() => {
     if (isDisabled) {
       return undefined;
     }
 
     if (!isFocused) {
-      onBlur?.();
+      lastOnBlur();
     }
 
-    if (onBlur) {
+    blurCallbacks.addCallback(lastOnBlur);
-      blurCallbacks.addCallback(onBlur);
+    focusCallbacks.addCallback(lastOnFocus);
-    }
-
-    if (onFocus) {
-      focusCallbacks.addCallback(onFocus);
-    }
 
     return () => {
-      if (onFocus) {
+      focusCallbacks.removeCallback(lastOnFocus);
-        focusCallbacks.removeCallback(onFocus);
+      blurCallbacks.removeCallback(lastOnBlur);
-      }
-
-      if (onBlur) {
-        blurCallbacks.removeCallback(onBlur);
-      }
     };
-  }, [isDisabled, onBlur, onFocus]);
+  }, [isDisabled, lastOnBlur, lastOnFocus]);
 }
 
 export function isBackgroundModeActive() {

src/hooks/useBeforeUnload.ts

@@ -2,8 +2,10 @@ import { useEffect } from '../lib/teact/teact';
 
 import { onBeforeUnload } from '../util/schedulers';
 
+import { useLastCallback } from './useLastCallback';
+
 export default function useBeforeUnload(callback: AnyToVoidFunction) {
-  useEffect(() => {
+  const lastCallback = useLastCallback(callback);
-    return onBeforeUnload(callback);
+
-  }, [callback]);
+  useEffect(() => onBeforeUnload(lastCallback), [lastCallback]);
 }

src/hooks/useHeavyAnimationCheck.ts

@@ -1,6 +1,9 @@
 import { useEffect } from '../lib/teact/teact';
+
 import { createCallbackManager } from '../util/callbacks';
 
+import { useLastCallback } from './useLastCallback';
+
 // Make sure to end even if end callback was not called (which was some hardly-reproducible bug)
 const AUTO_END_TIMEOUT = 1000;
 
@@ -11,27 +14,30 @@ let timeout: number | undefined;
 let isAnimating = false;
 
 const useHeavyAnimationCheck = (
-  handleAnimationStart: AnyToVoidFunction,
+  onStart?: AnyToVoidFunction,
-  handleAnimationEnd: AnyToVoidFunction,
+  onEnd?: AnyToVoidFunction,
   isDisabled = false,
 ) => {
+  const lastOnStart = useLastCallback(onStart);
+  const lastOnEnd = useLastCallback(onEnd);
+
   useEffect(() => {
     if (isDisabled) {
       return undefined;
     }
 
     if (isAnimating) {
-      handleAnimationStart();
+      lastOnStart();
     }
 
-    startCallbacks.addCallback(handleAnimationStart);
+    startCallbacks.addCallback(lastOnStart);
-    endCallbacks.addCallback(handleAnimationEnd);
+    endCallbacks.addCallback(lastOnEnd);
 
     return () => {
-      endCallbacks.removeCallback(handleAnimationEnd);
+      endCallbacks.removeCallback(lastOnEnd);
-      startCallbacks.removeCallback(handleAnimationStart);
+      startCallbacks.removeCallback(lastOnStart);
     };
-  }, [isDisabled, handleAnimationEnd, handleAnimationStart]);
+  }, [isDisabled, lastOnEnd, lastOnStart]);
 };
 
 export function isHeavyAnimating() {

src/hooks/useLastCallback.ts

@@ -0,0 +1,9 @@
+import { useCallback } from '../lib/teact/teact';
+
+import { useStateRef } from './useStateRef';
+
+export function useLastCallback<T extends AnyFunction>(callback?: T) {
+  const ref = useStateRef(callback);
+
+  return useCallback((...args: Parameters<T>) => ref.current?.(...args), [ref]) as T;
+}

src/hooks/usePriorityPlaybackCheck.ts

@@ -1,6 +1,9 @@
 import { useEffect } from '../lib/teact/teact';
+
 import { createCallbackManager } from '../util/callbacks';
 
+import { useLastCallback } from './useLastCallback';
+
 const startCallbacks = createCallbackManager();
 const endCallbacks = createCallbackManager();
 
@@ -8,27 +11,30 @@ let timeout: number | undefined;
 let isActive = false;
 
 const usePriorityPlaybackCheck = (
-  handleAnimationStart: AnyToVoidFunction,
+  onStart?: AnyToVoidFunction,
-  handleAnimationEnd: AnyToVoidFunction,
+  onEnd?: AnyToVoidFunction,
   isDisabled = false,
 ) => {
+  const lastOnStart = useLastCallback(onStart);
+  const lastOnEnd = useLastCallback(onEnd);
+
   useEffect(() => {
     if (isDisabled) {
       return undefined;
     }
 
     if (isActive) {
-      handleAnimationStart();
+      lastOnStart();
     }
 
-    startCallbacks.addCallback(handleAnimationStart);
+    startCallbacks.addCallback(lastOnStart);
-    endCallbacks.addCallback(handleAnimationEnd);
+    endCallbacks.addCallback(lastOnEnd);
 
     return () => {
-      endCallbacks.removeCallback(handleAnimationEnd);
+      endCallbacks.removeCallback(lastOnEnd);
-      startCallbacks.removeCallback(handleAnimationStart);
+      startCallbacks.removeCallback(lastOnStart);
     };
-  }, [isDisabled, handleAnimationEnd, handleAnimationStart]);
+  }, [isDisabled, lastOnStart, lastOnEnd]);
 };
 
 export function isPriorityPlaybackActive() {