react에서 lodash debounce의 적용시 팁
꼭 이벤트핸들러에 딱 붙여서 하지 않아도 된다. FC body에서 debounce를 씌운 함수에, useCallback을 씌우고 변수로 할당하면 된다. debounce의 모든 영역에서 useCallback을 씌우는 것이 핵심이다!!
Tag Archives: debounce
[react] useEffect 의 deps 변경에 대해 debounce (throttle) 처리하는 샘플코드
import { dc, isNotBlank } from '@/utils/common'; import _ from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; /** * textarea 의 내용이 변할 때 debounce를 걸고 convert 함수를 실행한다. */ const TsxConverter = () => { const [contents, setContents] = useState<string>(''); const debounced = useRef(_.debounce((newVal) => convert(newVal), 1000)); useEffect(() => { if… Read More »
[react] input onChange() 에 lodash debounce 적용 샘플
onChange={_.debounce((o: any) => handleChange(o, etc), 500)}
에러 메시지 피드백(alert, toast 유형)에 lodash debounce 적용 사례
개요 react axios 공통화 작업(interceptor 등)을 하던 중, 에러 메시지 알림에 debounce 처리를 해야 하는 요건이 발생. 소스 axios-settings.ts (커스텀 파일) /** * axios 기본설정 */ const axiosOpts = { // timeout: 5000, // headers: { // "Content-Type": "application/json", // }, }; // export const ax = Axios.create(axiosOpts); // /** * axios response interceptor */… Read More »
[링크] 디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점
디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점