diff --git a/docs/docs/react/hooks/useDebounce.mdx b/docs/docs/react/hooks/useDebounce.mdx index c6998d284..c4d4af921 100644 --- a/docs/docs/react/hooks/useDebounce.mdx +++ b/docs/docs/react/hooks/useDebounce.mdx @@ -1,3 +1,6 @@ +import { useState } from 'react'; +import { useDebounce } from '@modern-kit/react' + # useDebounce `debounce`를 쉽게 사용할 수 있는 커스텀 훅입니다. @@ -26,12 +29,61 @@ const useDebounce: ( ## Usage ```tsx +import { useState } from 'react'; import { useDebounce } from '@modern-kit/react'; const Example = () => { - const handle = useDebounce(() => { - console.log('debounce'); - }, 500); + const [count, setCount] = useState(1); + const [debouncedCount, setDebouncedCount] = useState(1); + + const countUp = () => { + setCount(count + 1); + }; + + const countUpWithDebounce = useDebounce(() => { + setDebouncedCount(debouncedCount + 1); + }, 1000); + + return ( +
+
+ +
+ +
+
+

count: {count}

+

debouncedCount: {debouncedCount}

+
+
+ ); +}; +``` + +## Example + +export const Example = () => { + const [count, setCount] = useState(1); + const [debouncedCount, setDebouncedCount] = useState(1); + const countUp = () => { + setCount(count + 1); + }; + const countUpWithDebounce = useDebounce(() => { + setDebouncedCount(debouncedCount + 1); + }, 1000); + return ( +
+
+ +
+ +
+
+

count: {count}

+

debouncedCount: {debouncedCount}

+
+
+ ); +}; - return ; -}; \ No newline at end of file + \ No newline at end of file