React_prevent double-clicking

07/Oct/2022

---

debouncing

• https://onlydev.tistory.com/151
• https://velog.io/@klloo/JavaScript-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81throttling%EA%B3%BC-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1debouncing

디바운싱은 성능뿐만 아니라 유료 API를 사용할 때 큰 효과를 볼 수 있다.디바운싱은 주로 연이어 발생하는 이벤트를 단일 이벤트로 만들고 싶은 곳, 즉 빈번하게 발생하는 타이핑 이벤트의 결과 표시(검색 결과 목록 표시), 블로그 글쓰기 에디터의 자동저장 기능 등에 쓰인다.

throttling

용자가 이벤트를 몇 번이나 발생 시키든 일정한 시간 간격으로 한번만 실행하도록 하는 기법, 짧은 주기로 실행되는 이벤트를 '조절(throttling)'하고 싶은 곳에 사용하면 된다. 스크롤 이벤트나 마우스 움직임 이벤트와 같은 이벤트가 연속으로 실행 되는 곳, 그리고 예시로 보인 하나의 버튼을 여러 번 클릭하는 경우에는 타임아웃을 좀 더 길게 설정하고, 쓰로틀링을 적용

The Situation

• situation

    const onClick = () => console.log("onClick");
    return <button onClick={onClick}>Click Me</button>;
}

The Fix

• to make sure the onClick function is not called more than once in a 300 ms interval.
• const onClick2 = debounce(onClick, 300)

const onClick2 = debounce(onClick, 300) // debounce package
function App() {
    const onClick = () => console.log("onClick");
    const onClick2 = debounce(onClick, 300) 
    return <button onClick={onClick2}>Click Me</button>;
}

---

References

1. 🎍 Debounce – How to Delay a Function in JavaScript (JS ES6 Example) https://www.freecodecamp.org/news/javascript-debounce-example/
2. add a boolean state
   https://blog.naver.com/PostView.nhn?isHttpsRedirect=true&blogId=psj9102&logNo=221070090068&parentCategoryNo=&categoryNo=19&viewDate=&isShowPopularPosts=false&from=postView

3.DUP
https://dev.to/stokemasterjack/prevent-double-click-dups-in-react-5cc6
https://intrepidgeeks.com/tutorial/prevent-dup-double-click-in-react

4-1. use lodash
https://www.mrlatte.net/code/2020/12/15/lodash-debounce
4-2. use lodash-es instead of lodash
https://yrnana.dev/post/2021-11-28-lodash-lodash-es
https://til.hashrocket.com/posts/dnzttruljf-prefer-lodash-es-when-using-webpack
correct way to import lodash 🔥🔥
https://www.blazemeter.com/blog/import-lodash-libraries

5.debouncing & throttling
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
https://velog.io/@klloo/JavaScript-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81throttling%EA%B3%BC-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1debouncing