• 목록

✅ onChange에서 바로 setState 하지 마라

controlled input 성능 최적화 패턴

입력 값을 상태로 관리할 때 보통 이렇게 쓴다:

<input value={value} onChange={(e) => setValue(e.target.value)} />

간단하긴 하지만,
타이핑마다 리렌더링이 발생하고
컴포넌트가 무거우면 입력 딜레이가 생길 수 있다.

✅ 해결: onChange → ref에 저장 → 디바운스 적용

const inputRef = useRef("");
const [value, setValue] = useState("");

const handleChange = (e) => {
  inputRef.current = e.target.value;
  debounceUpdate();
};

const debounceUpdate = useCallback(debounce(() => {
  setValue(inputRef.current);
}, 300), []);

• 리렌더링 최소화

• UX 부드러움 유지

• 특히 검색창, 필터링, 자동완성에서 효과적

✔️ 입력값은 무조건 setState로 처리할 필요 없다.
경량화와 UX를 함께 잡고 싶다면 디바운스 패턴을 고려하자.