From 1992c03832b4c96f9a3d1b73b1ad858cbeb687fc Mon Sep 17 00:00:00 2001
From: sangminnn <psm0102psm@gmail.com>
Date: Sun, 5 May 2024 18:55:16 +0900
Subject: [PATCH] =?UTF-8?q?docs(react):=20useBlockPromiseMultipleClick=20?=
 =?UTF-8?q?=ED=9B=85=EC=9D=98=20=EB=B9=84=EA=B5=90=20=EC=98=88=EC=8B=9C?=
 =?UTF-8?q?=EC=97=90=20debounce=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useBlockPromiseMultipleClick.mdx    | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/docs/react/hooks/useBlockPromiseMultipleClick.mdx b/docs/docs/react/hooks/useBlockPromiseMultipleClick.mdx
index f47aa6286..c73607ebe 100644
--- a/docs/docs/react/hooks/useBlockPromiseMultipleClick.mdx
+++ b/docs/docs/react/hooks/useBlockPromiseMultipleClick.mdx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useBlockPromiseMultipleClick } from '@modern-kit/react';
+import { debounce } from 'lodash-es';
 
 # useBlockPromiseMultipleClick
 
@@ -71,8 +72,11 @@ const Example = () => {
 export const Example = () => {
   const [blockingCount, setBlockingCount] = useState(1);
   const [nonBlockingCount, setNonBlockingCount] = useState(1);
+  const [debouncingCount, setDebouncingCount] = useState(1);
   const [value, setValue] = useState(null);
+  const [isApiLoading, setIsApiLoading] = useState(false)
   const { isLoading, blockMultipleClick } = useBlockPromiseMultipleClick();
+
   const fetchApi = async () => {
     const res = await fetch(
       `https://jsonplaceholder.typicode.com/todos/${blockingCount}`
@@ -80,18 +84,34 @@ export const Example = () => {
     setValue(res);
     setBlockingCount(blockingCount + 1);
   };
+
+  const debouncedFetchApi = debounce(async () => {
+    setIsApiLoading(true)
+    setDebouncingCount(debouncingCount + 1);
+    const res = await fetch(
+      `https://jsonplaceholder.typicode.com/todos/${blockingCount}`
+    ).then((response) => response.json());
+    setValue(res);
+    setIsApiLoading(false);
+  }, 1000);
+
   const handleClick = () => {
     setNonBlockingCount(nonBlockingCount + 1);
     blockMultipleClick(fetchApi);
   };
+
   return (
     <div>
-      <button onClick={handleClick}>버튼 클릭</button>
+      <div style={{ display: "flex" }}>
+        <button onClick={handleClick}>버튼 클릭</button>
+        <div style={{ width: "50px" }} />
+        <button onClick={debouncedFetchApi}>debounce 버튼 클릭</button>
+      </div>
       <div>
         <p>BlockingCount: {blockingCount}</p>
         <p>NonBlockingCount: {nonBlockingCount}</p>
       </div>
-      {isLoading ? <p>로딩중</p> : <p>{value?.title}</p>}
+      {isLoading || isApiLoading ? <p>로딩중</p> : <p>{value?.title}</p>}
     </div>
   );
 };