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}
+count: {count}
+debouncedCount: {debouncedCount}
+