refactor: 优化 useScrollToBottom

tianhao909 · Jun 24, 2023 · 9278d7f · 9278d7f
1 parent 35ba898
commit 9278d7f
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -3,8 +3,8 @@ import React, {
   useState,
   useRef,
   useEffect,
-  useLayoutEffect,
   useMemo,
+  useCallback,
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
@@ -341,15 +341,15 @@ function useScrollToBottom() {
   // for auto-scroll
   const scrollRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     const dom = scrollRef.current;
     if (dom) {
-      setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
+      requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight));
     }
-  };
+  }, []);
 
   // auto scroll
-  useLayoutEffect(() => {
+  useEffect(() => {
     autoScroll && scrollToBottom();
   });