Debouncing
디바운싱: 특정 함수를 여러번 계속해서 호출했을을시 마지막 호출로 부터 지정한 시간이 지났을때 실행을 함
onChange를 사용하여 State값을 변경할때
한글자 한글자 변경시 마다 리렌더링이 일어나서 비효율적이다
Debouncing을 사용하면 이 리렌더링을 줄일수 있다
Lodash라이브러리를 사용했다
const [keyword, setKeyword] = useState("");
const getDebounce = _.debounce((value) => {
void refetch({ search: value, page: 1 });
setKeyword(value);
}, 500);
const onChangeSearch = (event: ChangeEvent<HTMLInputElement>): void => {
getDebounce(event.currentTarget.value);
};<input type="text" onChange={onChangeSearch} />위의 코드는 input을 입력시 onChange가 일어나게 되고 getDebounce이 호출된다 그럼 이 디바운스는 0.5초간 다음 호출이 없으면 getDebounce함수를 실행하게 되는것이다
여기서 0.5초가 지나기 전에 다시 입력을 해서 onChange가 일어나면 다시 0.5초부터 시작한다
위 gif는 검색어를 입력후 디바운싱에 의해 0.5초후 해당 데이터를 요청하여 받아와서 화면에 뿌리는 모습이다
Throttling
쓰로틀링: 특정 함수를 여러번 계속해서 호출했을을시 실행후 지정한 시간이 지나면 실행
지정한 시간: 3초
이를 10초간 함수를 계속해서 실행한다 했을때 처음 실행후 3초동안은 호출을 무시
3초가 지났을때 다시 호출이 되면 다시 한번 실행후 3초간 다시 무시
이렇게 작동함
디바운싱은 10초간 계속해서 호출되면 실행이 계속 안되다가 10초후 마지막 호출 후에 지정한 시간이 지나면 실행한다는 차이점이 있다
