From 3295b1ab96fa43d25c94ad104e1e97b05f7bd495 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 14 Feb 2024 17:16:53 +0800
Subject: [PATCH] Remove the need for setStates
---
src/utils/useScrollFn.js | 83 +++++++++++++++++++++++++---------------
1 file changed, 53 insertions(+), 30 deletions(-)
diff --git a/src/utils/useScrollFn.js b/src/utils/useScrollFn.js
index 20141e2c..0c477b00 100644
--- a/src/utils/useScrollFn.js
+++ b/src/utils/useScrollFn.js
@@ -17,15 +17,22 @@ export default function useScrollFn(
deps,
) {
if (!callback) return;
- const [scrollDirection, setScrollDirection] = useState(null);
- const [reachStart, setReachStart] = useState(false);
- const [reachEnd, setReachEnd] = useState(false);
- const [nearReachStart, setNearReachStart] = useState(false);
- const [nearReachEnd, setNearReachEnd] = useState(false);
+ // const [scrollDirection, setScrollDirection] = useState(null);
+ // const [reachStart, setReachStart] = useState(false);
+ // const [reachEnd, setReachEnd] = useState(false);
+ // const [nearReachStart, setNearReachStart] = useState(false);
+ // const [nearReachEnd, setNearReachEnd] = useState(false);
const isVertical = direction === 'vertical';
const previousScrollStart = useRef(null);
+ const scrollDirection = useRef(null);
const onScroll = useThrottledCallback(() => {
+ // let scrollDirection = null;
+ let reachStart = false;
+ let reachEnd = false;
+ let nearReachStart = false;
+ let nearReachEnd = false;
+
const scrollableElement = scrollableRef.current;
const {
scrollTop,
@@ -60,18 +67,33 @@ export default function useScrollFn(
? scrollThresholdEnd
: scrollThresholdStart)
) {
- setScrollDirection(
- previousScrollStart.current < scrollStart ? 'end' : 'start',
- );
+ // setScrollDirection(
+ // previousScrollStart.current < scrollStart ? 'end' : 'start',
+ // );
+ scrollDirection.current =
+ previousScrollStart.current < scrollStart ? 'end' : 'start';
previousScrollStart.current = scrollStart;
}
- setReachStart(scrollStart <= 0);
- setReachEnd(scrollStart + clientDimension >= scrollDimension);
- setNearReachStart(scrollStart <= distanceFromStartPx);
- setNearReachEnd(
- scrollStart + clientDimension >= scrollDimension - distanceFromEndPx,
- );
+ // setReachStart(scrollStart <= 0);
+ // setReachEnd(scrollStart + clientDimension >= scrollDimension);
+ // setNearReachStart(scrollStart <= distanceFromStartPx);
+ // setNearReachEnd(
+ // scrollStart + clientDimension >= scrollDimension - distanceFromEndPx,
+ // );
+ reachStart = scrollStart <= 0;
+ reachEnd = scrollStart + clientDimension >= scrollDimension;
+ nearReachStart = scrollStart <= distanceFromStartPx;
+ nearReachEnd =
+ scrollStart + clientDimension >= scrollDimension - distanceFromEndPx;
+
+ callback({
+ scrollDirection: scrollDirection.current,
+ reachStart,
+ reachEnd,
+ nearReachStart,
+ nearReachEnd,
+ });
}, 500);
useLayoutEffect(() => {
@@ -88,25 +110,26 @@ export default function useScrollFn(
distanceFromEnd,
scrollThresholdStart,
scrollThresholdEnd,
- ]);
-
- useEffect(() => {
- callback({
- scrollDirection,
- reachStart,
- reachEnd,
- nearReachStart,
- nearReachEnd,
- });
- }, [
- scrollDirection,
- reachStart,
- reachEnd,
- nearReachStart,
- nearReachEnd,
...deps,
]);
+ // useEffect(() => {
+ // callback({
+ // scrollDirection,
+ // reachStart,
+ // reachEnd,
+ // nearReachStart,
+ // nearReachEnd,
+ // });
+ // }, [
+ // scrollDirection,
+ // reachStart,
+ // reachEnd,
+ // nearReachStart,
+ // nearReachEnd,
+ // ...deps,
+ // ]);
+
useEffect(() => {
if (init && scrollableRef.current) {
queueMicrotask(() => {