From 7d5558bb3a33a1b49b8da63958e4b62eeb6010dd Mon Sep 17 00:00:00 2001
From: timchen <timchen10001@gmail.com>
Date: Tue, 2 Nov 2021 21:38:11 +0800
Subject: [PATCH] add react/reach-end-fetch-more

---
 react/reach-end-fetch-more.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 react/reach-end-fetch-more.md

diff --git a/react/reach-end-fetch-more.md b/react/reach-end-fetch-more.md
new file mode 100644
index 0000000..6b46791
--- /dev/null
+++ b/react/reach-end-fetch-more.md
@@ -0,0 +1,35 @@
+# Reach End Fetch More
+
+
+## Scenario
+---
+> 滾動觸發 fetchMore 的用法，```避免在快速滾動時，連續觸發 fetchMore```，所以會利用 useRef 來作為靜態參數（loading, reach end ... etc）阻止 function 被連續呼叫。
+
+
+```typescript
+function Component() {
+  // 預設一開始是允許拉資料的
+  const allowedToFetchMore = useRef<boolean>(true);
+
+  // 進行資料拉取的 callback
+  const { data, fetchMore } = useMutation(...);
+
+  // 監聽滾軸是否達到底部
+  const hasReachEnd: boolean = useReachEnd();
+
+  useEffect(() => {
+    if (hasReachEnd && allowedToFetchMore.current) {
+      // 呼叫 callback 權限 先關起來，防止快速滾動連續觸發 fetchMore callback後，再執行拉取。
+      allowedToFetchMore.current = false;
+
+      fetchMore()
+        .then((response) => {
+          // else state handle logic
+          ...
+
+          allowedToFetchMore.current = true;
+        })
+    }
+  }, [hasReachEnd]);
+}
+```