Throttling

이벤트는 여러번 발생하지만 함수는 한번만 발생하는 식으로 일정 delay를 주고 과도한 이벤트 호출을 방지하는 기법

Type1 : Leading Edge (시작할때 한번)

Type2 : Trailing Edge (끝날때 한번)

Type3 : Leading & Trailing edge(시작,끝에 한번)

TimerId가 null이 아니면 바로 함수를 종료시키고 null이라면(클릭이 가능한 경우)setTimeout을 실행시킨뒤 다시 TimerId를 null로 만든다.

Debouncing

이벤트가 여러번 발생했을때 핸들러를 호출하지 않다가 마지막 이벤트를 기점으로 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것

tiemerId가 null이 아닐경우 clearTimeout을 통해 리셋시키고 timerId를 setTimeout을 이용해 제어 만약 2초안에 여러번을 눌렀다면 null이 아니기 때문에 clearTimeout으로 강제로 null을 만든뒤 다시 아래 로직으로 흘러가서 2초를 기다림

메모리 누수

예를 들면 전 페이지에서 실행된 함수가 다른 페이지로 넘어갔을 때도 작동하고 있는 것

useEffect를 활용해 return 문을 써서 해당 컴포넌트가 unmount될 시 실행할 조건을 넣는식으로 메모리 누수 방지 가능

Lodash

throttling 과 debouncing이 이미 적용되어 있는 라이브러리 앞에 _. 을 붙이기 때문에 로대쉬라 부름

설치법

yarn add lodash 

사용법 예

useCallback을 사용한뒤 내부에 lodash(_.)를 사용해 내용 작성