スクロール方向を取得するhookを作成しました。しかし、スクロールしたときに２度レンダリングしてしまいます。

スクロールしたときに、その方向を取得する hook を作成しました。しかし、スクロールしたときに２度レンダリングしてしまいます。

１度だけレンダリングするようにしたいのですが、どうすればよいでしょうか？

hook のコードはこちら。

js
1import { useState, useEffect } from "react";
2
3const useScrollDirection = (initialScrollDirection) => {
4  const [scrollDirection, setScrollDirection] = useState(
5    initialScrollDirection
6  );
7
8  useEffect(() => {
9    let lastScrollY = window.pageYOffset;
10    let ticking = false;
11
12    const updateScrollDirection = () => {
13      const scrollY = window.pageYOffset;
14
15      if (scrollY > lastScrollY) {
16        setScrollDirection("down");
17      } else {
18        setScrollDirection("up");
19      }
20
21      lastScrollY = scrollY;
22      ticking = false;
23    };
24
25    const handleScroll = () => {
26      if (!ticking) {
27        ticking = true;
28        window.requestAnimationFrame(() => updateScrollDirection());
29      }
30    };
31
32    window.addEventListener("scroll", handleScroll);
33
34    return () => {
35      window.removeEventListener("scroll", handleScroll);
36    };
37  }, []);
38
39  return scrollDirection;
40};
41
42export default useScrollDirection;