feat(@yourssu/react): create usePreventDuplicateClick #55
+402
−93
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
수고하셨어용! 제가 현재 노트북이 없는 관계로,, 리뷰는 11일 이후에 하도록 하겠숩니다😭 |
fecapark
reviewed
Oct 27, 2024
Comment on lines
+3
to
+20
| export const usePreventDuplicateClick = () => { | ||
| const [disabled, setDisabled] = useState(false); | ||
| const loadingRef = useRef(false); | ||
|
|
||
| const handleClick = useCallback(async (callback: () => Promise<void>) => { | ||
| if (loadingRef.current) return; | ||
|
|
||
| loadingRef.current = true; | ||
| setDisabled(true); | ||
|
|
||
| await callback(); | ||
|
|
||
| loadingRef.current = false; | ||
| setDisabled(false); | ||
| }, []); | ||
|
|
||
| return { disabled, handleClick }; | ||
| }; |
There was a problem hiding this comment.
p4) 유틸리티의 관점에서는 usePreventDuplicateClick 보다는 usePromise 가 더 낫지 않나 싶네요.
Suggested change
| export const usePreventDuplicateClick = () => { | |
| const [disabled, setDisabled] = useState(false); | |
| const loadingRef = useRef(false); | |
| const handleClick = useCallback(async (callback: () => Promise<void>) => { | |
| if (loadingRef.current) return; | |
| loadingRef.current = true; | |
| setDisabled(true); | |
| await callback(); | |
| loadingRef.current = false; | |
| setDisabled(false); | |
| }, []); | |
| return { disabled, handleClick }; | |
| }; | |
| export const usePromise = () => { | |
| const [isPending, setIsPending] = useState(false); | |
| const callPromise = useCallback(async (callback: () => Promise<void>) => { | |
| setIsPending(true); | |
| await callback(); | |
| setIsPending(false); | |
| }, []); | |
| return { isPending, callPromise }; | |
| }; |
fecapark
reviewed
Oct 27, 2024
Comment on lines
+8
to
+10
| if (loadingRef.current) return; | ||
|
|
||
| loadingRef.current = true; |
There was a problem hiding this comment.
p3) 굳이 ref를 사용할 필요가 없어보여요.
본래 목적이 이벤트 핸들러로 국한된다면 내부에서 상태와 세터를 같이 사용해도 문제 없을거예요.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
1️⃣ 어떤 작업을 했나요? (Summary)
기존 코드에 영향을 미치지 않는 변경사항
usePreventDuplicateClick훅 추가usePreventDuplicateClick.test테스트 추가@testing-library/jest-domdevDendency 추가2️⃣ 알아두시면 좋아요!
훅의 테스트를 위해 테스트 코드에서 더미 버튼을 만든 후 버튼의
disabled속성 값에disabled를 대입해서 이를 테스트 했습니다. 또한100ms의 호출 시간을 가지는 콜백 함수를 mocking해서, 중복 실행 여부를 확인하였습니다.3️⃣ 추후 작업
usePreventDuplicateClick훅 적용usePreventDuplicateClick훅 적용4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?