디벨로퍼스 오답노트

3초 요약: 이렇게 고치세요 원인: 디바운스는 상태 업데이트 "시점"만 늦출 뿐, 렌더링 비용이 큰 연산이 한꺼번에 몰리면 그 순간 메인 스레드가 그대로 잠김 해결: useTransition 으로 입력값 업데이트는 긴급 처리, 무거운 리스트 재계산은 startTransition 안에 넣어 비긴급으로 분류 주의: 총 연산량 자체가 줄어드는 건 아니라서, 렌더링 비용이 진짜로 비싼 CPU 바운드 작업에만 효과적임 setQuery(e.target.value); // 긴급: 즉시 startTransition(() => setDeferredQuery(e.target.value)); // 비긴급 ↓ 왜 이런 문제가 나는지 원리 보기 실시간 대용량 트래픽을 관제하는 모니터링 대시보드처럼, 수천 개의 액티브 커넥션 노드를 필터링하는 검색창을 만들다 보면 입력하자마자 브라우저가 순간적으로 굳어버리며 키보드 타자가 수 초 뒤에나 한꺼번에 밀려 입력되는 현상을 마주치게 됩니다. 검색 쿼리가 바뀔 때마다 무거운 차트 컴포넌트와 노드 그리드가 동기적으로 리렌더링되며 싱글 스레드인 브라우저의 메인 스레드를 완전히 독점해 버리는 것이 원인입니다. 대표적인 최적화 기법인 디바운스(Debounce)를 먼저 떠올리기 쉽지만, 이는 렌더링 횟수만 지연시킬 뿐 한 번 렌더링이 시작될 때 발생하는 메인 스레드 프리징(Thread Lock) 자체는 해결해 주지 못합니다. React 18의 Concurrency(동시성) Feature인 useTransition 을 쓰면 렌더 큐의 우선순위를 재조정해서 입력 응답성을 확보할 수 있습니다. 디바운스의 한계와 이를 동시성 렌더링으로 해결하는 방법, 그리고 트레이드오프를 정리합니다. lodash.debounce가 메인 스레드 락을 풀지 못한 이유 전통적인 웹...