javascript - useEffect、useCallback、setTimeout を連携させるのに問題がある

Question

幅に基づいてスライダーのカスタム スクロール動作を実装しようとしています。スライダー内の現在のページと合計ページを追跡するために、useState を使用しています。これは私がコンパイルしようとしたコードですが、予期しない動作がいくつかあります。

const [isTimeoutLocked, setIsTimeoutLocked] = useState(false)
const handleScroll = useCallback(() => {
  
    const gridContainer = document.querySelector(".grid");
    const totalPages = Math.ceil(
            gridContainer.scrollWidth / gridContainer.clientWidth + -0.1
        );
    setTotalPages(totalPages);
    const scrollPos = gridContainer.clientWidth + gridContainer.scrollLeft + 2;
    if (gridContainer.scrollWidth > scrollPos) {
        gridContainer.scrollBy({
            left: gridContainer.clientWidth + 20.5,
            behavior: "auto",
            block: "center",
            inline: "center",
        });
        setCurrentPage(currentPage + 1);
        setIsTimeoutLocked(false)
        } else {
            gridContainer.scrollTo(0, 0);
            setCurrentPage(1);
            setIsTimeoutLocked(false)
        }
    },[currentPage]);


    useEffect(() => {
    if(!isTimeoutLocked){
        setTimeout(() => {
            setIsTimeoutLocked(true)
            document.querySelector(".grid") && handleScroll();
        }, 5000);
    }
    
}, [currentPage, displayDate, isTimeoutLocked, handleScroll]);

ここでの問題は、currentPage が UI に表示されているときに、else が handleScroll 関数内で実行されると 1 にリセットされることです。これはまったく問題ありませんが、取得時に 2 に戻るのではなく、前の値に戻ります。次のページへ。また、isTimeoutLocked を useEffect の依存関係として追加したため、setTimeout はより頻繁に実行されますが、正しい値を取得するための依存関係としてのみ使用したいので、変更のたびに useEffect が実行されるわけではありません。isTimeoutLocked の目的は、現在の日付を変更してコンテナ内のコンテンツを変更したときに、多数のタイムアウトが登録されないようにすることです。